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

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

/* 超出部分显示省略号，支持多行 */
.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，使用方法如下，很简单，注意看注释部分

<!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>

3，效果

posted on 2019-02-22 15:53 被遗忘的优雅阅读(942) 评论(0) 编辑收藏举报