CSS解決文字溢位問題

文字溢位：

有時候一個文字框中的文字太多，但文字框有設定的寬度，這是會出現文字溢位的現象，例如一個li中文字數量較多，但li有自己的寬度，就會導致下面的情景

<li>文字內容文字內容文字內容文字內容文字內容文文字內容文字內容</li>

li{
	list-style: none;
	width: 200px;
	height: 30px;
	line-height: 30px;
	border: 1px solid red;
   }

為了解決上面的問題，我們可以在css中設定如下程式碼：

white-space: nowrap;
/* 強制性的在一行顯示所有的文字，直到文字結束或者遭遇br標籤物件才換行*/
overflow: hidden;
/* 溢位的文字隱藏起來*/
text-overflow: ellipsis;
/*溢位的文字使用圓點顯示*/

每一句程式碼如上面的解釋。效果如下圖：

注意：想要做出溢位文字顯示省略號的效果，上面的三點，一個都不能少