文字超出省略号显示
Posted kcat
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文字超出省略号显示相关的知识，希望对你有一定的参考价值。
一行
div{
width:100px;/*一定要写*/
white-space：nowrap;
overflow：hidden;
text-overflow：ellipsis;
}
来源于 http://blog.csdn.net/u011546766/article/details/34446737
多行
google浏览器
div{
overflow:hidden;
text-overflow：ellipsis;
display:-webkit-bos;
-webkit-line-clamp:2;/*2行溢出隐藏*/
-webkit-box-orient:vertical;
}
opera浏览器
div{
overflow:hidden;
white-space：normal;
height:2rem;/*2行溢出隐藏*/
text-overflow:-o-ellipsis-lastline;
}
全部兼容用js实现
$("div").each(function(i){
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
来源于http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html
以上是关于文字超出省略号显示的主要内容，如果未能解决你的问题，请参考以下文章