CSS解决文字溢出问题

文字溢出：

有时候一个文本框中的文字太多，但文本框有设定的宽度，这是会出现文字溢出的现象，例如一个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;
/*溢出的文字使用圆点显示*/

每一句代码如上面的解释。效果如下图：

注意：想要做出溢出文字显示省略号的效果，上面的三点，一个都不能少