文本溢出隐藏

单行文本

el {
  /* white-space属性是用来定义元素内的空白该如何处理
   * nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
   */
  white-space: nowrap;
  /* overflow：当内容溢出元素框时
   * overflow只能作用于块级元素身上，如果对内联元素设置则无效果 
   * 可以配合display:block 
   */
  overflow: hidden;
  /* text-overflow：当文本溢出的时候
   * ellipsis：显示省略号
   */
  text-overflow: ellipsis;
}

多行文本

el {
  /* 多行文本移溢出隐藏时，建议不给高度
   * 因为当高度大于 行数时被 overflow:hidden 的内容依然会显示
   * 或可根据行高和-webkit-line-clamp计算高度 
   */

  /* -webkit-box 将对象作为弹性伸缩盒子模型显示
   * -webkit-inline-box 将对象作为弹性伸缩行内盒子模型显示 
   */
  display: -webkit-box;
  overflow: hidden;
  width: 500px;
  text-overflow: ellipsis;
  /*限制在一个块元素中显示文本的行数*/
  -webkit-line-clamp: 2;
  /*设置伸缩盒子的子元素的排列方式*/
  -webkit-box-orient: vertical;

  /* 当文本中有非中日韩的文字时，可加上 word-break 设置文本换行*/

  /* word-break属性指定非中日韩文字的断行规则。 */
  /* break-all 允许在单词内换行。
   * keep-all 只能在半角空格或连字符处换行。
   */
  word-break: break-all;
}