您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

css实现超过两行变省略号

时间:12-15来源:作者:点击数:

要实现超过两行后显示省略号,你可以使用 CSS 的 line-clamp 属性结合 -webkit-line-clamp 和 -webkit-box-orient 属性来实现。这个方法在大部分现代浏览器中有效。

以下是一个示例:

.multiple-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2; /* 设置要显示的行数 */
}

在上面的示例中,.multiple-lines 类将会在超过两行后自动截断并显示省略号。

实现效果:

下面是一个实现超过两行后显示省略号的效果。

css实现超过两行变省略号

请注意:

display: -webkit-box; 设置为 box 可以让元素表现为一个块级元素,同时也让 -webkit-line-clamp 属性生效。

-webkit-box-orient: vertical; 设置为 vertical 表示文本会垂直排列。

-webkit-line-clamp: 2; 指定了显示的行数为2,超过两行的文本将会被截断并显示省略号。

请注意,这个方法只在部分现代浏览器中有效,对于不支持 -webkit-line-clamp 的浏览器,文本将不会被截断。

-webkit-line-clamp 浏览器兼容性:

css实现超过两行变省略号
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门