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

多行文本截断策略

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

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

或者如下:

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

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

.ellipsis{
    width:100px;
    height:24px;
    line-height:24px;
    font-size:14px;
    overflow:hidden;
    display:block;
    text-overflow:ellipsis;
    white-space:nowrap;
}

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

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

.ellipsis{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

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

.ellcover{
    width:400px;
    height:200px;
    line-height:24px;
    font-size:14px;
    position:relative;
}
.ellcover:after{
    display:block;
    content:'...';
    position:absolute;
    width:42px;
    height:24px;
    bottom:0;
    right:0;
}

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