文字超过 x 行后补上省略号的几种办法
原文
简单来说，在 pc 端，文字过长溢出的话，溢出的部分会被替换成...,然而在显示情况中，更多的是在超过 x 行之后才启用这个特性，例如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div class="module">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
|
最终希望三行之后到这种效果
为了演示，我们先定义基础的 css，剩下的方法都在这个 css 的基础之上
1
2
3
4
5
6
7
8
9
|
.module {
width: 250px;
overflow: hidden;
}
|
Weird WebKit Flexbox Way
使用 webkit 内置的方案
1
2
3
4
5
6
7
8
9
10
11
|
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
|
这种方案只有 webkit 内核的浏览器支持，在使用上遇到一个问题，就是 autoprefixer 会移除-webkit-box-orient: vertical;
所以我们需要增加个注释
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
|
The Opera Overflow Way
Opera 浏览器的方案，和 webkit 差不多
1
2
3
4
5
6
7
8
9
|
.line-clamp {
height: 3.6em;
text-overflow: -o-ellipsis-lastline;
}
|
The Clamp.js Way
使用 Clamp.js
1
2
3
4
5
6
7
|
var module = document.getElementById("clamp-this-module");
$clamp(module, { clamp: 3 });
|
建议包裹在<p id="clamp-this-module"></p>中保证 firefox 正常使用
以下是原文的几种显示方案
