关于前端页面的文字溢出截断的招数已经很常见了。
通常的实现有,前端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 空间、微信、微博那种。

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