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

<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同理