单行多行文本省略表示

文本省略表示

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

优点：跨浏览器