单行文字显示省略号
要想设置单行文字显示省略号, 首先必须要有 width, 否则无法达到预想的效果, 还得加上下面三个 CSS 样式:
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
多行文字显示省略号
目前多行文字省略, 只有谷歌浏览器支持, 其余都还未支持多行文字省略.
谷歌浏览器实现多行文字省略必需要下面的 CSS 样式:
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 4;
- overflow: hidden;
其中 - webkit-line-clamp:4; 表示超过四行的文本省略 (即是文本显示行数).
来源: http://www.qdfuns.com/note/48832/04d40bc59a029363333c03ea1633c14b.html