CSS控制文本行数和隐藏超出文本

大多数页面的标题，需要控制展示的宽度，并且超出的部分用省略号来代替，这里介绍如何使用纯CSS，实现文本的隐藏。

隐藏单行文本#

此方法必须要保证文本存在具体的宽度。

.title{
  white-space: nowrap; /*文字展示再一行*/ 
  overflow：hidden; /* 隐藏超出的文本 */
  text-overflow: ellipsis; /* 超出的文本用省略号展示 */
}

隐藏多行文本#

固定写法，存在兼容性

.title{
  overfilow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* 改变元素类型 */
  -webkit-line-clamp: 2; /* 展示的行数 */
  -webkit-box-orient: vertical;
}