CSS text beyond extra long line wrap ellipsis

Hide text that is too long by means of ellipsis

1. The text is too long and there are multiple lines of ellipsis

2. Single-line ellipsis for too long text

<body>
    <div class="text">
        我是两行自动换的文本我是两行自动换的文本我是两行自动换的文本我是两行自动换的文本我是两行自动换的文本我是两行自动换的文本我是两行自动换的文本
    </div>
</body>

  The text is too long, more than 2 lines omitted

.text{
    width: 200px;
    overflow: hidden;
    word-break: break-all;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2行后省略号 */
}

The text is too long and exceeds 1 line to be omitted

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

Guess you like

Origin blog.csdn.net/m0_46114541/article/details/130378860