text-overflow: ellipsis;单行，多行文本溢出显示 . . .

2021 年 03 月 30 日

2082字数

常见的单行文本溢出显示省略号写法：text-overflow: ellipsis;overflow: hidden;white-space: nowrap;


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .p{
            width: 80px;
            height: 50px;
            line-height: 40px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
    <body>
        <p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示</p>
    </body>
</html>

text-overflow: ellipsis;多行文本溢出就无法满足
WebKit浏览器有一个-webkit-line-clamp的属性，用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号；


<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .p {
            height: 60px;
            line-height: 30px;
            width: 80px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
    <body>
        <p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示</p>
    </body>
</html>

补充


-webkit-line-clamp超过两行就出现省略号
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

如果你标签内的是英文，英文是不会自动换行的，所以你需要让他自动换行添加如下代码即可

word-wrap:break-word;
word-break:break-all;

其它浏览器的话就需要通过js实现：



<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        div{
            height: 60px;
        }
        p {
            line-height: 30px;
            width: 80px;
            margin: 0 auto;
        }
    </style>
    <body>
        <div id="div">
            <p id="p">多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示</p>
        </div>
    </body>
    <script type="text/javascript">
            var eleH = document.getElementById("div").clientHeight;

var pEle = document.getElementById("p");

        while(pEle.clientHeight > eleH) {

            pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");

        };
</script>
</html>

text-overflow: ellipsis;单行，多行文本溢出显示 . . .