溢出文本省略号表示的css实现及js polyfill

浏览数：74 / 时间：2015年06月09日

需求经常有需要对文字溢出进行处理，通常是在文字显示部分的末尾添加“...”等。如下：

这种处理可以放在服务器当中做，通过截取特定长度文字来达到。

但是效果不好

一是截取的长度不好控制，尤其是中英文混排或者字体非等宽的情况

二是显示逻辑放到服务器做，日后维护很不方便

三是对 SEO 也有影响

CSS 有专门处理这种问题的属性

一：css处理单行

对于单行文本而言，使用 “text-overflow” 。IE6+都支持，真幸福。

但不是什么元素添加上这个都能立刻有效。

它要求元素必须是bfc，也就是有明确的宽度；再有其中的文字不能换行

p {  overflow: hidden;            /* 除了visible以外的值 */
  white-space: nowrap;         /* 文字不换行 */
  text-overflow: ellipsis;     
}

组合使用上述属性才能让元素有正确的效果。如下：

demo：http://runjs.cn/code/c3bfbze3

text-overflow 的可选值有三种

　　　　clip：默认值。直接截断。

　　　　ellipsis：三个点儿（...）

　　　　(string)：自定义文字。如果这个问题太长，也会被截断

text-overflow 还可以设置两个值，对应左右分别采用不同的处理方式，这里的左右貌似和文字方向没什么关系。如下：

  text-overflow: clip ellipsis

只有firefox支持，没多大意义。我自己没有试出来效果。详见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow

二：css处理多行文本

上面说的只能处理单行，你也看到了，它要求文字不能换行。

如果遇到多行文本的溢出处理，就需要 line-clamp 出马了

p {
  overflow: hidden;               /* 非必须，但是不设置效果不对 */
  display: -webkit-box;           /* 必须是webkit-box */
  -webkit-line-clamp: 3;          /* 文本行数 */
  -webkit-box-orient: vertical;   /* webkit-box的纵轴方向 */
}

demo：http://runjs.cn/code/2qdpzcoi

注意，元素必须声明成webkit-box，真的好奇怪，这会导致一系列问题（比如元素高度和宽度的计算会不同），需要特别注意

声明为 "display: flex" 不起作用。可能需要添加其他辅助属性。就不实验了。flex和-webkit-box的互换性还是糊里糊涂的。

如果不写 "overflow:hidden" 效果还是有的，但明显不是你想要的

opera有自己的实现方式，但不是web标准，所以作用不大。

不过这种方式跟以前的属性更有传承，而且貌似更符合一般人的直觉。

.last-line {
  height: 3.6em;                        /* 需要指定高度 */
  text-overflow: -o-ellipsis-lastline;
}

三：js polyfill

css 不够， js 凑。

是的，就这样。

上面说的处理多行的方法兼容性太差了，用在实际项目上的机会恐怕不多（除非是直接使用 webkit 做 App）

真正可行的还是各种polyfill。

clamp.js ： https://github.com/josephschmitt/Clamp.js     看文档提不错的，优先推荐。可以不指定行数，可以指定动画
ftellipsis ： https://github.com/ftlabs/ftellipsis                   备选
succinct ： http://micjamking.github.io/succinct                不怎么样，截取字符串来实现的