超出文本截取替换为省略号

时间 2019-11-30

标签超出文本截取替换省略号繁體版

原文原文链接

今天作了一个以下图的模块javascript

其中，标题以及介绍这两块都须要作超出某个宽度就截取一行或两行文字，后面用省略号代替。java

因为是作的手机页面，用JS来开销太大，只能从CSS入手。web

一行的很好解决。spa

以下就OK了。blog

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

多行的想了好久，好比，写定行高，超出隐藏，弄个省略号做为补丁打在尾部。可是有个问题，页面宽度不固定，可能会出现只遮住一半字的状况，看起来很Low。ip

继续查找资料，CSSV5啊！it

-webkit-line-clamp属性能够控制截取文本行数class

overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;