css单行省略&多行省略

在这里插入图片描述
<!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>

        body {
            font-size: 16px;
        }

        .single-container {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin-bottom: 10px;

            text-overflow: ellipsis;
            white-space: nowrap; /* white-space属性为nowrap时，不会因为超出容器宽度而发生换行 */
            overflow: hidden;
        }

        .mutiple-container { 
            width: 200px;
            height: 200px;
            background-color: #bfa;

            line-height: 1.5; /* 行高设置为字体大小的1.5倍 */
            height: 4.5em;      /* 限制高度为3行 */

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            /* 备注：多行文本省略号的实现，不同的浏览器有不同的CSS属性名称。
            例如上面的-webkit-，只适配于移动端页面和基于Webkit内核实现的浏览器，
            目前除了IE浏览器其他主流浏览器全部可以适配。 */
        }
    </style>
</head>

<body>
    <div class="single-container">
        她杨陛幕救归小了目也羊历已，了者乏衣，况欲九张为老会动重也土县，作夫给给谭于磊大烦地无帝马下先我洪。
    </div>
    <div class="mutiple-container">
        木揽入德贼和他，着薪意不友认，死拢家山到事间志后逃然回使报问三打卅杨，如收天求在极狱自感身三将，说而攻，是前而，蒲意中非杂国也才可者承九松，也是也县接百，意法何，怒人足当耳作你是啦那应担疾的秦有选，事我即会弟对苦的云下，天畴可全韩出太派词书者，气谓斯，司。
    </div>
</body>

</html>
原文链接：https://blog.csdn.net/qq_16992475/article/details/126921706