如何讓多文本內容只顯示一行，其余用省略號來顯示

在此需要用到三個屬性配合使用：

overflow: hidden;/*超出部分隱藏*/
white-space: nowrap;/*不換行*/
text-overflow:ellipsis;/*超出部分省略號顯示*/

實例：
<p>

興高采烈的破蛹 重獲新生的沖動 尋找愛情世界 美夢
　　既然不是毛毛蟲 就要壯烈的撲火 短暫青春要像 煙火

</p>

css代碼：
<style>

*{
    margin: 0;
    padding: 0;
}

p{
    width: 100px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

效果如下：

 

</style>