很多业务需求下会出现文本溢出无法显示的情况，设置为显示省略号又不兼容，兼容性只能用js实现，今天介绍一种可以直接用css实现的方法。该方法兼容各大主流浏览器，除了诡异的IE低版本
实现原理：盒模型浮动原理
实现代码源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行文本实现省略号显示</title>
</head>
<style type="text/css">
/*纯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;
}
</style>
<body>
<div class="wrap">
<div class = "text">
ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试
</div>
</div>
</body>
</html>有更好的方法可以交流
版权声明：转载请注明出处 https://blog.csdn.net/qdmoment/article/details/84971312
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
