CSS设置文字不换行，超出字数用...显示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35388564/article/details/77185852

<p class="testText">这是一段实验文字，超出字数用...显示</p>

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

当文本为多行文字时如下设置CSS

.box p{ 
        width:400px; 
        border:1px solid #ccc;
         margin:20px auto;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
}

注意 react中需要把

-webkit-line-clamp改为

WebkitLineClamp

-webkit-box-orient同理