作者：潜伏在人间_144 | 来源：互联网 | 2023-09-12 17:35
这里介绍两种方法，都是css实现的，其他的js，jq代码，可以去网上搜索很多。
第一种：margin负值定位法
<div class="text_overflow" >
<div class="text_con" >这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。div>
<div class="text_dotted" >…div>
.text_overflow{width:300px; height:25px; overflow:hidden;line-height:25px;border:1px solid #ccc;}
.text_overflow .text_con{float:left;height:25px; margin-right:15px; overflow:hidden;}
.text_overflow .text_dotted{ float:right;width:15px; height:26px;margin-top:-23px;margin-top:-30px\0;*margin-top:-23px;}
预览效果为：
解释：此段中text_dotted是单独放省略号的标签，当文字短时，省略号是隐藏在该文字所在行的上方，当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是省略号所在div层的高度的绝对值要比其margin的绝对值大，也就是height：26px。要比margin-top：-23px；大。注意此句中，因为要兼容ie的各个版本，所以写了hack，导致ie8和ie9设置了更大的margin-top。
第二种：text-overflow：ellipsis+ ellipsis.xml
代码如下：
<div class="slh">多出的文省略号表示多出的文省略号表示多出多出div>
.slh{width:160px;height:50px;line-height:25px;border:4px solid #eee;
white-space:nowrap;/*强制文本在一行内显示*/
text-overflow:ellipsis; /*溢出省略号，支持ie、safari（webkit）*/
-o-text-overflow:ellipsis; /*溢出省略号，支持opera*/
overflow:hidden;/*溢出隐藏*/
-moz-binding:url('ellipsis.xml#ellipsis');/*溢出省略号，支持firefox*/}
预览效果为：
解释：如上css备注所示，注意-moz-binding:url('ellipsis.xml#ellipsis'); 这段中引用的xml文件，需要点击下载，放在文件中，借鉴学习与张鑫旭的博客http://www.zhangxinxu.com/。
京公网安备 11010802041100号