实现单行超出部分，省略号表示 兼容各浏览器

本文转载自wliuxia 《实现单行超出部分，省略号表示 兼容各浏览器》

这里介绍两种方法，都是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/。

转载于:https://www.cnblogs.com/webqiand/p/4602564.html