欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

文本超出隐藏 综合整理

程序员文章站 2022-06-26 11:41:59
最近的开发中,文本超出隐藏总是一个没有得到完整解决的问题,现在整理一遍,虽然也没有得出一劳永逸的方案。 PURE CSS 单行隐藏 需要限制 多行隐藏 移动端支持度很好,很方便,也不需要限制 任意行,只超出时对末尾显示渐变点点点 重点是这个 这是自己模拟文本超出后的效果,不依赖原生 很巧妙的利用了浮 ......

最近的开发中,文本超出隐藏总是一个没有得到完整解决的问题,现在整理一遍,虽然也没有得出一劳永逸的方案。

PURE CSS

单行隐藏

需要限制 width

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

多行隐藏

移动端支持度很好,很方便,也不需要限制width

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

任意行,只超出时对末尾显示渐变点点点

重点是这个
这是自己模拟文本超出后的效果,不依赖原生
很巧妙的利用了浮动的特点,只看代码的话,兼容起码有ie9+, 手头没ie还没具体测试
(原文)[http://dev.mobify.com/blog/multiline-ellipsis-in-pure-css/]
(可以配合翻译一起看)[http://web.jobbole.com/90636/]
文本超出隐藏 综合整理

JS

(clamp.js)[https://github.com/josephschmitt/Clamp.js]

其实没用过这个库,只是看有人推荐, 也没有考虑过使用js做这种事情