1. 单行文本
<!-- 在单行文本的情况下,可以用来使超出范围的文本用省略号隐藏 -->
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
技术:CSS
注意:
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。
说明:
overflow 属性规定当内容溢出元素框时发生的事情,所有主流浏览器都支持,
hidden值是指内容会被修剪,并且其余内容是不可见的。
text-overflow属性是设置或检索是否使用一个省略标记(...)标示对象内文本的溢出,IE,Chrome和Safari支持,Firefox和Opera不支持,
ellipsis值是指当对象内文本溢出时显示省略标记(...)。
white-space 属性设置如何处理元素内的空白,所有主流浏览器都支持,
nowrap值规定段落中的文本不进行换行。
2. 多行文本
<!-- 多行文本的情况下,用省略号“...”隐藏超出范围的文本 -->
.figcaption {
background: #EEE;
width: 410px;
height: 3em;
margin: 1em;
}
.figcaption p {
margin: 0;
line-height: 1.5em;
}
$(".figcaption").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)(\.\.\.)?$/,"..."));
};
});
思路:文本框高度指定为多行的固定宽度(比如height:3em),通过从后向前逐个删除末尾字符,直至文本高度小于文本框高度。
技术:CSS+jQuery
优点:跨浏览器