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

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>

轉(zhuǎn)載于:https://www.cnblogs.com/mmykdbc/p/6204471.html

總結(jié)

以上是生活随笔為你收集整理的如何让多文本内容只显示一行，其余用省略号来显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。