文本超出显示省略号

阳春三月天

已于 2023-11-02 16:05:54 修改

阅读量95

点赞数

文章标签： javascript 前端 css

于 2023-11-02 15:58:45 首次发布

本文链接：https://blog.csdn.net/weixin_50517811/article/details/134184612

版权

单行文本超出区域显示省略号
- 宽度由父元素限制
- nowrap限制元素换行，超出区域隐藏，文本超出区域使用...表示

.ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

多行文本超出区域显示省略号
- display:-webkit-box，通常与-webkit-box-orient: vertical; 一起使用。它用于创建一个具有多行布局效果的容器，其中文本在垂直方向上进行布局，可以显示多行文本。
- -webkit-line-clamp: 5;指定了容器中要显示的行数，此处为5

 .ellipsisLn {
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 5;
            display: -webkit-box;
            -webkit-box-orient: vertical;
             }

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ellipsis</title>
    <style>
        .ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ellipsisLn {
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 5;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div style="width: 500px; margin: 20px 0 0 20px;">
        <div class="ellipsis">
            青青园中葵，朝露待日晞。
            阳春布德泽，万物生光辉。
            常恐秋节至，焜黄华叶衰。
            百川东到海，何时复西归？
            少壮不努力，老大徒伤悲！
        </div>
        <br />
        <br />
        <div class="ellipsisLn">
            氓之蚩蚩，抱布贸丝。匪来贸丝，来即我谋。送子涉淇，至于顿丘。匪我愆期，子无良媒。将子无怒，秋以为期。
            乘彼垝垣，以望复关。不见复关，泣涕涟涟。既见复关，载笑载言。尔卜尔筮，体无咎言。以尔车来，以我贿迁。(尔 一作：尓)
            桑之未落，其叶沃若。于嗟鸠兮，无食桑葚！于嗟女兮，无与士耽！士之耽兮，犹可说也。女之耽兮，不可说也。
            桑之落矣，其黄而陨。自我徂尔，三岁食贫。淇水汤汤，渐车帷裳。女也不爽，士贰其行。士也罔极，二三其德。
            三岁为妇，靡室劳矣。夙兴夜寐，靡有朝矣。言既遂矣，至于暴矣。兄弟不知，咥其笑矣。静言思之，躬自悼矣。
            及尔偕老，老使我怨。淇则有岸，隰则有泮。总角之宴，言笑晏晏。信誓旦旦，不思其反。反是不思，亦已焉哉！
        </div>
    </div>
</body>

</html>