多行文本溢出变为省略号遇到的坑

儒雅的曹曹曹

于 2024-02-26 20:06:01 发布

阅读量221

点赞数 8

文章标签： css css3 前端

本文链接：https://blog.csdn.net/CYL_2021/article/details/136303390

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 140px;
            overflow: hidden; // 溢出隐藏
            text-overflow: ellipsis; // 溢出用省略号显示
            display:-webkit-box; // 作为弹性伸缩盒子模型显示。
            -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
            -webkit-line-clamp:3; // 显示的行数
            background-color: aqua;
        }

    </style>
</head>
<body>
    <div class="box">
        右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收右签收
    </div>
</body>
</html>

在使用上述代码实现多行文本溢出变为省略号时，遇到几个坑，记录如下：

坑一：设置高度大于其显示行数的高度时，超过显示行数的内容也会显示

上述问题如下图
在这里插入图片描述
解决方案：设置盒子的高度为要显示内容的高度或者不设置高度，高度由内容撑起；效果如下

坑二:文本包含很长的英文单词或数字时无法正确换行

问题如下图：
在这里插入图片描述
如果文本加汉字不超过一行不会换行

原因分析：
如果文本内容包含很长的英文单词或数字，并且没有空格或断行符来进行自然换行，浏览器可能会将整个单词或字符串作为一个不可分割的单元处理。这会导致文本溢出容器边界，破坏页面布局。
解决方案：
添加属性 word-break：break-all；