如何优雅的限制文字显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	body {
		padding: 30px;
	}
	li {
		resize: none;  /*防止拖拽*/
		list-style: none;
		width: 200px;
		height: 30px;
		border: 1px solid pink;
		white-space: nowrap;
		/*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
		overflow: hidden;  /* 2. 超出的部分 隐藏 */
		text-overflow: ellipsis;  /* 3. 溢出的部分用省略号替代 */
		line-height: 30px;
	}
	span{
		display: block;
		width:200px;
		border: 1px solid pink;
		white-space: nowrap;
		overflow: hidden;  
		text-overflow: ellipsis;  
    }

	</style>
</head>
<body>
	<ul>
		<li>文字内容文字内容文字内容文字内容文字内容</li>
		<li>文字内容文字内容文字内容文字内容文字内容</li>
		<span>其实写多少都无所谓，我只能看到这么多，就这么多,反正不可以再多了</span>
	</ul>
</body>
</html>

这种样式效果很简单，关键的样式主要有

white-space: nowrap;/*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
overflow: hidden;  /* 2. 超出的部分 隐藏 */
text-overflow: ellipsis;  /* 3. 溢出的部分用省略号替代 */

当然得是在限制了宽高这一类情况使用是最为合理的