css多行文本溢出时出现省略号的实现

这篇文章将为大家详细讲解有关css多行文本溢出时出现省略号的实现，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

1. css

tip：只兼容chrome内核的浏览器。ff不支持。

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

延展

word-wrap

text-overflow

white-space

box-orient

这个属性还没有被浏览器支持。需要使用各自浏览器的私有属性。

line-clamp

只有chrome内核的浏览器支持自己的私有属性。

显示多少行块级元素。

2. js

使用js控制溢出文本如何显示的方法有很多。这里推荐一个脚本文件：ellipsis.js

ellipsis.js

使用方法。

引入脚本文件

<script class="lazy" data-src="https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js"></script>

使用

var ell = Ellipsis({    lines: 3})var ele = document.getElementsByClassName('test')ell.add(ele)

延展

它还有一些配置项。若不配置则使用默认值。

{    ellipsis: '...', // 默认显示的替代文本    debounce: 0, // 延迟多长时间后执行    responsive: true, // 是否有窗口大小改变时执行    className: '.clamp', // 默认操作具有这个类的元素。    lines: 2, // 默认只出现2行元素。    portrait: null, // 默认不改变，如果你想要在竖屏模式下有不同的行数，    break_word: true // 默认截断单词。}

关于css多行文本溢出时出现省略号的实现就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。