css超過顯示省略號
阿新 • • 發佈：2020-12-29
1 <style> 2 div{ 3 width: 300px; 4 overflow: hidden; 5 white-space: nowrap; /*不換行*/ 6 text-overflow:ellipsis;/*超出部分文字以...顯示*/ 7 } 8 </style>
white-space：設定如何處理元素內的空白，所有瀏覽器都支援
| normal | 預設。空白會被瀏覽器忽略。 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。 |
| nowrap | 文字不會換行，文字會在在同一行上繼續，直到遇到 <br> 標籤為止。 |
| pre-wrap | 保留空白符序列，但是正常地進行換行。 |
| pre-line | 合併空白符序列，但是保留換行符。 |
| inherit | 規定應該從父元素繼承 white-space 屬性的值。 |
text-overflow：規定當文字溢位包含元素時發生的事情，所有主流瀏覽器都支援
| clip | 修剪文字。 |
| ellipsis | 顯示省略符號來代表被修剪的文字。 |
| string | 使用給定的字串來代表被修剪的文字。（自己沒實現--.---） |
控制多行顯示省略號<style> div { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; } </style>
line-clamp：
- 限制顯示的行數。
- -webkit-line-clamp 是一個不規範的屬性，沒有出現在 CSS 規範中。