单行文本以省略号结尾

display: block;
(隐藏属性)white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
1
2
3
4

多行文本以省略号结尾

WebKit 浏览器或移动端的页面

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
1
2
3
4
5

伪元素方法

p {
  position: relative;
  line-height: 1.4em;
  /* 3 times the line-height to show 3 lines */
  height: 4.2em;
  overflow: hidden;
}
p::after {
  content: '...';
  font-weight: bold;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20px 1px 45px;
  background: url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png)
    repeat-y;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • IE6-7 不显示 content 内容，所以要兼容 IE6-7 可以是在内容中加入一个标签，比如用...去模拟；
  • 要支持 IE8，需要将::after 替换成:after；
  • 不溢出也会显示

JavaScript 方案

1.Clamp.js 下载及文档地址：https://github.com/josephschmitt/Clamp.js 使用也非常简单：

js 代码:

var module = document.getElementById('clamp-this-module');
$clamp(module, { clamp: 3 });
1
2

https://github.com/ftlabs/ftellipsis

var element = document.getElementById('my-element');
var ellipsis = new Ellipsis(element);

ellipsis.calc();
ellipsis.set();
1
2
3
4
5
<div
  id="view"
  style="border:1px solid red;width:200px;height:70px;overflow:auto;word-break:break-all"
></div>
1
2
3
4
const s =
  '这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本';
const el = document.getElementById('view');
n = el.offsetHeight;
for (i = 0; i < s.length; i++) {
  el.innerHTML = s.substr(0, i);
  if (n < el.scrollHeight) {
    el.style.overflow = 'hidden';
    el.innerHTML = s.substr(0, i - 3) + '...';
    break;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

TOC