html 文本溢出 兼容,纯css实现文本溢出省略号，兼容（火狐，IE9，chrome）

不少业务需求下会出现文本溢出没法显示的状况，设置为显示省略号又不兼容，兼容性只能用js实现，今天介绍一种能够直接用css实现的方法。该方法兼容各大主流浏览器，除了诡异的IE低版本css

实现原理：盒模型浮动原理html

实现代码源码：chrome

/*纯css实现省略号，兼容火狐，IE9，chrome*/

.wrap{

height:40px;line-height:20px;overflow: hidden;width:500px;background:#999;

}

.wrap .text{

float:right;margin-left:-5px;width:500px;word-break: break-all;

}

.wrap::before{

float:left;width:5px;content:'';height:40px;

}

.wrap::after{

float:right;content:'...';height:20px;line-height:20px;

width:30px;margin-left:-30px;/*更改宽度和边距，移动省略号位置*/

position:relative;left:100%;top:-20px;

padding-right:5px;background:#999;

}

有更好的方法能够交流浏览器

版权声明：转载请注明出处 https://blog.csdn.net/qdmoment/article/details/84971312测试