使用怎么css让超出文本显示省略号

时间：2015-09-24 08:48:16 　来源：免费模板网　作者：风雪　阅读次数　tags省略号 css

我们在布局网站的时候，有时候文章标题过长就是掉到下一行看着很别扭，整个布局都乱了，那怎么解决这问题呢，实现方式也是多样，程序里面超出多少字节输出省略号，或者用css里面的样式实现超过宽的部分显示，不兼容IE6
语法：

text-overflow : clip | ellipsis

　　参数：
　　clip : 　不显示省略标记（...），而是简单的裁切
　　（clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（...）

说明：
　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
　　请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

示例：
　　div { text-overflow : clip; }

　　text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

例

代码如下
html代码： <div> <p><span>CSS Web DesignDiv+css教程 - www.111cn.net</span><p> </div>

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

代码如下
p { 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ㄒ)//

代码如下
p { overflow: hidden; white-space: normal; height: 3em; text-overflow: -o-ellipsis-lastline; }

Demo: http://jsfiddle.net/Cople/ash5v/

jQuery
除了各个浏览器私有的属性，有没有跨浏览器的解决方法呢？当然是通过js实现啦！（通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度）

代码如下
$(".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)(...)?$/, "...")); }; });