单行与多行文本的溢出处理

单行文本溢出

<div>生活就像海洋，只有意志坚强的人才能到达彼岸</div>

div {
	white-space: nowrap; /* 不换行 */
	text-overflow: ellipsis; /* 内容溢出时用省略号显示 */
	overflow: hidden; /* 内容溢出时隐藏 */
}

多行文本溢出

<div>生活就像海洋，只有意志坚强的人才能到达彼岸</div>

div {
	width: 50px;
	-webkit-line-clamp: 2; /* 展示2行文本，该属性需要配合下面属性使用 */
  display: -webkit-box; /* 必须结合的属性，将对象看做弹性伸缩盒子 */
  -webkit-box-orient: vertical; /* 必须结合的属性，将子元素垂直排列 */
  overflow: hidden;
}