溢出部分省略号总结

1、单行定宽省略号：

.txt {
　　with: ？px;
　　overflow: hidden;
　　text-overflow: ellipsis;
　　white-space: nowrap;
}

条件是： 定宽、溢出隐藏、文字隐藏部分用省略号代替、强制一行。这些缺一不可。

例外，以上代码几乎可以兼容众多常用浏览器，如果你想兼容opera，务必加入以下代码：

-o-text-overflow: ellipsis;/*兼容opera*/

如果父元素包裹的都是内联元素，可在父元素中定义.txt，但是子元素都会变成一行。

e.g:

<div class="txt">
　　<span>是垃圾分类睡觉啊发链接啊分了多久啊了发了快速的减肥了是的拉风离开的副书记龙口路上的风景了咖啡</span> 
　　<span>是垃圾分类睡觉啊发链接啊分了多久啊了发了快速的减肥了是的拉风离开的副书记龙口路上的风景了咖啡</span>
</div>

 

如果父元素中包裹的包含块级元素，需要在对应的需要隐藏的元素中定义.txt。否则其子元素在ie7以上不会有效果。原因很简单，span元素没有满足重要的四个条件。

e.g:

<div>
　　<img style="block" />
　　<span class="txt">是垃圾分类睡觉啊发链接啊分了多久啊了发了快速的减肥了是的拉风离开的副书记龙口路上的风景了咖啡</span>
　　<span class="txt">是垃圾分类睡觉啊发链接啊分了多久啊了发了快速的减肥了是的拉风离开的副书记龙口路上的风景了咖啡</span>
</div>

 

结论：请在需要隐藏的元素上定义相应的属性（四大条件），而不是其父元素上!

tips: 还可以用结构上灵活实现，比如一个空的盒子的定位覆盖上去，可以参考尾部张鑫旭的网站链接，不是能实现就是好的，则其所需很重要。

 

2、多行定高溢出省略号显示

.txt {height: ?px;}

css唯一需要的是定个溢出的高度，html结构上需要内嵌一个子盒子，对比子盒子是否超过父元素的高度，通过正则表达式（或是字符串方法）删除超过部分并把最后代替为省略号，以下是jquery实现：

e.g:

<div class="txt">
　　<p>是垃圾分类睡觉啊发链接啊分是垃圾分类睡觉啊发链接啊分了多久啊了发了快速的减肥了是的拉风离开的副书记龙口路上的风景了咖啡是垃圾分类睡觉啊发链接啊分了多久啊了发了快速的减肥了是的拉风离开的副书记龙口路上的风景了咖啡是垃圾分类睡觉啊发链接啊分了多久啊了发了快速的减肥了是的拉风离开的副书记龙口路上的风景了咖啡是垃圾分类睡觉啊发链接啊分了多久啊了发了快速的减肥了是的拉风离开的副书记龙口路上的风景了咖啡了多久啊了发了快速的减肥了是的拉风离开的副书记龙口路上的风景了咖啡</p>
</div>

<script>
$(".txt").each(function(){
　　var H = $(this).height();
　　var $p = $("p", $(this)).eq(0);
　　while ($p.height() > H) { 
　　　　//正则替换
　　　　$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
　　　　//字符串替换
　　　　$p.text($p.text().substring(0,$p.html().length-4));
　　　　$p.html($p.html()+'...');
　　};
});
</script>

效果图：

修改下代码：

$p.text($p.text().substring(0,$p.html().length-15));
$p.html($p.html()+'...');

可以这样：

 

不过这个的空白处是不可控的，因为英文和中文的字符长度不一样，如果文章夹杂着各种文字，就会。。很坑~

注意：因为是逐字删除替换，所以效率都不高，以下是运行的时间截图，正则的稍微少那么点时间。如果需求不是很旺盛，觉得还是不要用了，纯css是最好的~

正则：1509ms

 

字符串：1582ms

tips: 当然实现方法还有很多，如果你喜欢，可以参照jquery的思想写出对应的js原生代码实现，例外还可以直接通过后台php代码输出直接实现，要了解问你的后台同事吧。

 

3、中间溢出部分用省略号表示

　　据说有个中间省略号显示的方法，还是纯css实现，只是实现方式比较繁杂，就没去细看了，有兴趣的可以去google..

 

需要了解更多，请参考：

http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html

http://www.zhangxinxu.com/wordpress/2009/09/关于文字内容溢出用点点点-省略号表示/

 

第一篇博客写好了，主要才是参照各路方法的个人一些总结，知识还只是简单的css方面的，希望可以不断的学习。

——9.25

转载于:https://www.cnblogs.com/xinghh/p/3338765.html