【www.bbyears.com--flex】
语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。
示例:
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text-overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。
例
代码如下html代码:
CSS Web DesignDiv+css教程 - www.111cn.net
css代码:
代码如下div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}
/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* FF 下的样式 */
p{clear:both;}
p span{
float:left;
max-width:175px; /*IE不能解释该属性,而FF可以*/
}
p:after{
content:"...";
}
注意:这里还要补充的一点是关于p span 的宽度用了"max-width"这个属性,IE不能解释该属性,而FF可以,这样就避开了IE对SPAN宽度的重新应用。
如果你不想使用css可使用jquery实现
-webkit-line-clamp
Webkit支持一个名为-webkit-line-clamp的属性,他其实是一个WebKit-Specific Unsupported Property,也就是说这个属性并不是标准的一部分,可能是Webkit内部使用的,或者被弃用的属性。但是既然被人发现了,而且能用,为什么不试试呢~o(∩_∩)o
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Demo: http://jsfiddle.net/Cople/maB8f/
-o-ellipsis-lastline
从 Opera 10.60 开始,text-overflow属性有了一个名为-o-ellipsis-lastline的值。应用后的效果就像名字一样,在文本的最后一行加上省略号。这个方法比楼上的方法简单多了,可惜也不在标准之内//(ㄒoㄒ)//
overflow: hidden;
white-space: normal;
height: 3em;
text-overflow: -o-ellipsis-lastline;
}
Demo: http://jsfiddle.net/Cople/ash5v/
jQuery
除了各个浏览器私有的属性,有没有跨浏览器的解决方法呢?当然是通过js实现啦!(通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度)
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)(...)?$/, "..."));
};
});
Demo: http://jsfiddle.net/Cople/DrML4/5/