CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

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

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

最多阅读

为Electron程序添加运行时日志 9月以前  |  3183次阅读
初探 React 组件 1年以前  |  1956次阅读
wordpress标签页的制作 1年以前  |  1794次阅读
500行PHP代码搞定富文本安全过滤 1年以前  |  1751次阅读
22个HTML5的初级技巧 1年以前  |  1692次阅读
js动态创建类和实例化 1年以前  |  1684次阅读
使用 SRI 增强 localStorage 代码安全 1年以前  |  1683次阅读
浅谈浏览器的原生拖拽事件 1年以前  |  1669次阅读
第三版主题上线 1年以前  |  1655次阅读
Node.js下通过配置host访问URL 1年以前  |  1633次阅读
CSS清除浮动 1年以前  |  1612次阅读
利用服务器返回header来传输数据 1年以前  |  1603次阅读
【译】V8 团队眼中的 ES6、ES7及未来 1年以前  |  1586次阅读
函数式编程离我们有多远? 1年以前  |  1581次阅读
续:JS动态创建类和实例化 1年以前  |  1579次阅读