CSS 限制文字行数(超出显示省略号...)

CSS 限制文字行数(超出显示省略号...)

/* 单行隐藏  */
.xxx {
  /* 文本不换行 */
  white-space: nowrap;
  /* 超出范围隐藏 */
  overflow: hidden;
  /* 文字超出用省略号 */
  text-overflow: ellipsis;
}

/* 多行隐藏  */
.xxx {
  /* 在恰当的断字点进行换行 */
  word-break: break-all;
  /* 超出范围隐藏 */
  overflow: hidden;
  /* 文字超出用省略号 */
  text-overflow: ellipsis;
  /* 盒子模型 */
  display: -webkit-box;
  /* 显示的文本行数 */
  -webkit-line-clamp: 3;
  /* 子元素的垂直排列方式 */
  -webkit-box-orient: vertical;
}