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程序添加运行时日志 11月以前  |  4248次阅读
初探 React 组件 1年以前  |  2088次阅读
wordpress标签页的制作 1年以前  |  1953次阅读
500行PHP代码搞定富文本安全过滤 1年以前  |  1883次阅读
js动态创建类和实例化 1年以前  |  1849次阅读
Node.js下通过配置host访问URL 1年以前  |  1825次阅读
使用 SRI 增强 localStorage 代码安全 1年以前  |  1824次阅读
22个HTML5的初级技巧 1年以前  |  1816次阅读
浅谈浏览器的原生拖拽事件 1年以前  |  1797次阅读
第三版主题上线 1年以前  |  1776次阅读
CSS清除浮动 1年以前  |  1774次阅读
2014年度总结 1年以前  |  1723次阅读
【译】V8 团队眼中的 ES6、ES7及未来 1年以前  |  1719次阅读
利用服务器返回header来传输数据 1年以前  |  1713次阅读
获取元素的计算的样式 1年以前  |  1701次阅读