关于前端页面的文字溢出截断的招数已经很常见了。 通常的实现有，前端css控制、后端字数输出控制或者前端js字数处理等。

# 单行文字

单行文字的溢出处理很简单，我通常是使用css来控制，在文字末尾加上...。

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

给需要文字截断的节点增加一个这样的基础类，然后设置该节点的宽。 同时注意给未来可能会出现溢出的节点也加上此类，再设置最大宽度max-width，因为很多奇葩用户的输入是你无法掌控的。 - -！

# 多行文字

我希望在一个的固定高度的容器中，内容超出后，最后一个文字显示...。

如法炮制给多行文字的容器添加ellipsis类后，你会发现的确是显示...，不过此时文字是一行的。 因为在该类中添加了属性white-space，用来定义一个段落如何换行。属性值nowrap：禁止文本换行，除非遇到<br>。

一番思考后，确定了一个方案。

1. 给固定高度的容器添加overflow: hidden；
2. 给容器添加相对定位；
3. 添加伪元素样式，content:'...'，绝对定位，然后位置定位在容器末尾。

伪元素的兼容性为IE8，如果需要兼容IE7的可以使用标签代替。

# 带显示全部的多行文字

类似 QQ 空间、微信、微博那种。

{% jsfiddle imys/wymxhaek/3 html,css,result %}

使用 2 个伪元素加 1 个 a 链接实现。 精妙之处在于使用伪元素遮挡一行文字，让 a 链接位于伪元素之上显示。