在前端开发中,经常会遇到文本内容过多而导致显示不下的问题。为此,我们可以使用CSS中的text-overflow属性来解决这个问题。但是,当文本内容超出两行时,text-overflow属性会失效。那
在前端开发中,经常会遇到文本内容过多而导致显示不下的问题。为此,我们可以使用CSS中的text-overflow属性来解决这个问题。但是,当文本内容超出两行时,text-overflow属性会失效。那么,该如何解决这个问题呢?
/* 通用样式 */ p { overflow: hidden; height: 3em; /* 默认显示三行 */ line-height: 1em; /* 文本行高 */ margin-bottom: 20px; } /* 兼容性写法 */ /* Firefox */ /* -moz-第一行省略,且第二行后用省略号代替 */ /* -moz-ellipsis-after */ /* -moz-first-ellipsis */ /* 其它浏览器 */ /* 第一行省略,且第二行后用省略号代替 */ /* -webkit-line-clamp */ /* 第二行后用省略号代替 */ /* -webkit-box-orient */ /* -webkit-box-pack */ /* -webkit-box-lines */ .line-clamp2 { /* Firefox */ display: -moz-box; -moz-box-orient: vertical; -moz-box-align: center; -moz-box-pack: justify; /* 其它浏览器 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-box-pack: justify; -webkit-box-lines: multiple; } /* 可以根据需求自行调整line-clamp的值 */
如上面的代码所示,为了解决text-overflow属性失效的问题,我们可以采用一些兼容性写法。其中,在Firefox浏览器中,我们可以使用-moz-ellipsis-after和-moz-first-ellipsis属性来实现第一行省略、第二行后使用省略号代替的效果。在其它浏览器中,我们可以使用-webkit-line-clamp、-webkit-box-orient、-webkit-box-pack和-webkit-box-lines等属性来实现同样的效果。
总之,在日常开发中,如果遇到文本内容过多的问题,不妨尝试一下上述的兼容性写法,相信一定能帮助我们有效地解决这个问题。
粉丝
0
关注
0
收藏
0