在網頁上我們經常看到如下圖的文字省略的顯示方式，那麼是如何做到這種效果的呢？要想解決這個問題，我們先要了解文字溢位隱藏。
normal 使用瀏覽器預設的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半形空格或連字元處換行。
主要處理英文單詞
white-space設定或檢索物件內文字顯示方式。通常我們使用於強制一行顯示內容
normal : 為預設處理方式
nowrap : 為強制在同一行內顯示所有文字，直到文字結束或者遇到br標籤物件才換行。
可以處理中文
visible
預設值。內容不會被修剪，會呈現在元素框之外。
hidden
內容會被修剪，並且其餘內容是不可見的。
scroll
內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto
如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit
規定應該從父元素繼承 overflow 屬性的值。
text-overflow : clip | ellipsis
設定或檢索是否使用乙個省略標記（...）標示物件內文字的溢位
clip : 不顯示省略標記（...），而是簡單的裁切
ellipsis : 當物件內文字溢位時顯示省略標記（...）
從上面我們可以得出結論，如果要實現這個功能必須滿足三個條件：
1.white-space：nowrap 文字強制一行內顯示
2.overflow：hidden 文字溢位裁剪
3.text-overflow：ellipsis 文字溢位時顯示省略標記
CSS溢位文字隱藏
所謂的介面樣式，就是更改一些使用者操作樣式，比如 更改使用者的滑鼠樣式，表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。防止表單域拖拽 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動...
css實現文字溢位隱藏省略
1.單行文字溢位省略 overflow hidden 超出限定寬度則隱藏超出的內容 white space nowrap 設定文字在一行內顯示，不能換行 text overflow ellipsis 規定當文字溢位時，顯示省略號來代表被修剪的文字2.多行文字溢位省略 overflow hidden ...
文字溢位顯示省略標記 的bug
常用css方法 注意事項 1 只適用於塊屬性元素 或者給行內元素設定display block 2 當元素浮動時，不會顯示 解決方法是給元素設定width 100 或者固定的寬度。3 火狐中的bug 當用彈性盒模型布局時，布局的子元素設定此方法不起作用。解決方法 不用彈性盒模型布局。或者採用別的方法...