4. 溢出的文字省略號顯示

4.1 white-space

• white-space設置或檢索對象內文本顯示方式。通常我們使用于強制一行顯示內容

white-space:normal ；默認處理方式white-space:nowrap ；　強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽對象才換行。

4.2 text-overflow 文字溢出

• 設置或檢索是否使用一個省略標記（…）標示對象內文本的溢出

text-overflow : clip ；不顯示省略標記（...），而是簡單的裁切 text-overflow：ellipsis ； 當對象內文本溢出時顯示省略標記（...）

注意：

一定要首先強制一行內顯示，再次和overflow屬性 搭配使用

4.3 單行文本溢出顯示省略號——總結三步曲

/*1. 先強制一行內顯示文本*/white-space: nowrap;/*2. 超出的部分隱藏*/overflow: hidden;/*3. 文字用省略號替代超出的部分*/text-overflow: ellipsis;

4.4 多行文本溢出顯示省略號

多行文本溢出顯示省略號，有較大兼容性問題，適合于webkit瀏覽器或移動端（移動端大部分是webkit內核）

更推薦讓后臺人員來做這個效果，因為后臺人員可以設置顯示多少個字，操作更簡單。

總結

以上是生活随笔為你收集整理的十、CSS三行代码实现 溢出的文字省略号显示（white-space: nowrap;overflow: hidden;text-overflow: ellipsis;）的全部內容，希望文章能夠幫你解決所遇到的問題。

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