CSS多行省略号跨浏览器 [英] CSS Multi Line ellipsis Cross Browser

问题描述

我的网页中有一个具有固定宽度和高度的div。

There is a "div" in my webpage that has fixed width and height.

以下css仅适用于单行文本：

Following css only works with single line text:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

如何使用跨浏览器兼容性的纯css在div的文本上的多行文本上应用省略号？

How can I apply ellipsis on multiline text on the text inside that div using pure css with cross browser compatibility?

推荐答案

尝试此示例：

display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

http://codepen.io/martinwolf/pen/qlFdp

或转到dotdotdot.js

or go for dotdotdot.js

这篇关于CSS多行省略号跨浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！