css属性ellipsis，如何设置文本超出显示三个点？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

最常见最单一的需求就是：文本超出范围就显示三个点，这个需求在传统类型网页展示里面非常常见。当然，以前的时候是在服务器端做字符串截取来实现这个需求的，但是现在使用css来实现这个需求。苏南大叔在本篇文章里面，就主要以前端的角度，来探讨一下字符串自动截取显示三个点的可能方案。

测试环境：win10，chrome。方案仅供参考，是否符合实际需求，还需要具体情况还要具体分析。

单行文本三个点【常见,看这个就行】

这个方案的关键点是：text-overflow: ellipsis。测试代码如下：

<p class="line1">
  文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>
<style>
  .line1 {
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

然而在实际的代码编写过程中，会出现虽然设置了"ellipsis"，但是依然不显示三个点的问题。那么，这个时候，你需要检查下面两个属性，同时记得设置一个合适的宽度。

overflow: hidden;
white-space: nowrap;

多行文本三个点（不考虑兼容性）

如果不考虑兼容性问题，可以使用占据统治地位的webkit核心浏览器的一个实验中属性-webkit-line-clamp。测试代码如下：

<p class="linen">
  文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>
<style>
  .linen {
    width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>

除了设置常规的代码text-overflow: ellipsis和overflow: hidden;外，还需要设置css：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

• 这里的-webkit-line-clamp就是指保留几行，行数设置为1的话，就和第一个“单行三个点”效果一致了。
• 这里的display属性默认是block，但是block属性并不能触发多行文本三个点的效果。必须设置为：-webkit-box或者-webkit-inline-box。
• 另外一个属性-webkit-box-orient属性是控制块内子元素的方向的，一般设置为vertical。

多行文本三个点（考虑兼容性）

后端方案： 考虑到兼容性的问题，如果需求是多行文本显示三个点的时候，苏南大叔还是建议使用服务器端做字符串截取的方案。参考文字：

• https://newsn.net/say/php-mb_strimwidth.html

前端方案： 如果前端角度考虑兼容性的话，在网络上有个clamp.js，可以解决ie下面的同样的多行文本三个点的需求。不过，已经很多年没有更新过了。其github主页地址是：

• https://github.com/josephschmitt/Clamp.js

测试代码如下：

<script src="js/clamp.min.js"></script>
<script>
 $clamp(document.getElementsByClassName("p-title")[0], { clamp: 2 });
</script>

这个代码苏南大叔没有仔细做测试，大家自行根据情况决定是否使用。鉴于目前webkit核心浏览器的决定性统治地位，如果不是非常严格的情况下，这个clamp.js代码也没有使用的必要性。

相关文章

• https://newsn.net/say/php-mb_strimwidth.html
• https://newsn.net/say/css-flex-axis.html
• https://newsn.net/say/em-vs-rem.html

结论

结论就是，使用css来实现文本三个点效果是最好的选择。不过考虑到兼容性的问题，个人觉得还是启用服务器端的文本截取效果比较好一些。

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。