1.非多行的簡單處理方式：

css代碼：

.words{width：400px;overflow:hidden; /*超過部分不顯示*/ text-overflow:ellipsis; /*超過部分用點點表示*/white-space:nowrap;/*不換行*/ }

2.規定行數的截斷處理方式

css代碼：

.words{width：400px;
text-overflow: ellipsis; /*有些示例里需要定義該屬性，實際可省略*/display: -webkit-box;-webkit-line-clamp: 2;/*規定超過兩行的部分截斷*/-webkit-box-orient: vertical;overflow : hidden; word-break: break-all;/*在任何地方換行*/ }

?

轉載于:https://www.cnblogs.com/alsf/p/7570811.html

總結

以上是生活随笔為你收集整理的css处理超出文本截断问题的两种情况（多行或者单行）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。