当前位置:首页 > 多行文本截断策略

多行文本截断策略

发布于 2018-05-22 阅读 751 次 CSS Javascript

这篇文章我们主要宣传一下已经烂大街的前端字符串截取问题,效果如下:

或者如下:

截断字符串,是我们前端页面中最常实现的功能之一,一般我们的做法都是设置固定的宽高,overflow:hidden,对于锚点就多加加一个title鼠标move上显示完成文字就了事,这种对于单行的锚点很是受用,如果不要求最后以‘…’结尾的话,那这样就很ok了,但是事情永远都不是那么简单。下面来介绍下单行和多行文本截断添加…的方法。

单行文字截断加‘…’的方式很简单就可以实现,方法如下:

  1. .ellipsis{
  2. width:100px;
  3. height:24px;
  4. line-height:24px;
  5. font-size:14px;
  6. overflow:hidden;
  7. display:block;
  8. text-overflow:ellipsis;
  9. white-space:nowrap;
  10. }

对于多行文本就有些复杂了

我们有两种思路,css和js,先想css能不能实现,css不能实现,我们再去考虑js,经过查询找哥也好,娘也好,我们会发现google实现了一些css属性可以实现多行文本截断末尾加‘…’,如果是只做移动端页面的话,这个基本够用了,毕竟移动端几乎都是google内核浏览器,方法如下:

  1. .ellipsis{
  2. overflow:hidden;
  3. display:-webkit-box;
  4. -webkit-line-clamp: 2;
  5. -webkit-box-orient: vertical;
  6. }

还有一种css的曲线救国方案(可以用在pc和wap),就是用一个块盖住后面的几个文字,这个块的内容是‘…’,下面给出代码思路:(注意这只是个思路,具体情况具体考虑,这种方法比较适合文字固定的文本,毕竟盖块的大小要调整到恰到好处不很容易)

  1. .ellcover{
  2. width:400px;
  3. height:200px;
  4. line-height:24px;
  5. font-size:14px;
  6. position:relative;
  7. }
  8. .ellcover:after{
  9. display:block;
  10. content:'...';
  11. position:absolute;
  12. width:42px;
  13. height:24px;
  14. bottom:0;
  15. right:0;
  16. }

如果我们还要兼容pc的多个浏览器,就要使用js了,dotdotdot.js是一款很好用的字符串截取工具,废话不多说,直接上真强实弹,例子:
[狠狠点击这个例子](https://www.w2le.com/demo/2.html “例子”)
另外clamp.js也是一款不错的插件。
用法例子代码: