您的位置：首页 > Web前端 > CSS

CSS 文字超出部分显示省略号（支持多行），兼容几乎所有常用浏览器

2019-02-22 15:36 344 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_34304427/article/details/87878498

1，公共样式，在公共的 CSS 中加入以下内容

[code].text-ells:before {
content: '';
float: left;
width: 5px;
height: 100%;
}
.text-ells > :first-child {
float: right;
width: 100%;
margin-left: -5px;
word-break: break-all;
word-wrap: break-word;
text-align: justify;
}
.text-ells:after {
content: '...';
box-sizing: content-box;
float: right;
position: relative;
width: 50px;
top: -25px;
left: 100%;
margin-left: -50px;
padding-right: 5px;
text-align: right;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 40px);
}

2，使用如下，注释很清晰，很简单

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字编码</title>
<!-- 引入刚刚添加了上面样式的公共 CSS 文件 -->
<link rel="stylesheet" href="../css/common.css">
<style type="text/css">
/* 目标元素必须设置宽高，以及行高才能生效，想要保留多少行，高就设置为行高的多少倍 */
.text {
width: 400px;
height: 60px;
line-height: 30px;
overflow: hidden;
}
/* 目标元素必须设置一个 AFTER，这里的 TOP 和行高相等 */
.text:after {
top: -30px;
}
</style>
</head>
<body>
<div class="wrap">
<!-- 目标元素直接引入 text-ells -->
<div class="text-ells text">
<!-- 目标元素需要添加一个子元素，在子元素里放文字 -->
<div>
2.main 这里是要多行文本溢出省略的dj
nfskfnsknjvndsfkjsnfkas nfdjskn
fkjdsnfkjdsnfkjshfnsajfknk
jsafnkjsangkjdsncjkdsvdsbjb
</div>
</div>
</div>
</body>
</html>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航