CSS文字超出超长换行省略号

通过省略号的方式隐藏文字过长

1. 文字过长多行省略号

2. 文字过长单行省略号

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

  文字过长,超过2行省略

.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行后省略号 */
}

文字过长超过1行省略

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

猜你喜欢

转载自blog.csdn.net/m0_46114541/article/details/130378860