多行文本缩略并支持展开收缩

关键点

css 样式

css

.test {
  line-height: 1.5;
  /* 3em是这么计算来的 line-height*2=3em, 
  表示最大高度为line-height的2倍, 也就是说最多只能显示2行 */
  /* 如果要表示3行，则 line-height*3=4.5em, 将max-height设置为4.5em即可 */
  /* 如果要表示4行，则 line-height*4=6em, 将max-height设置为6em即可，其他行数依次类推 */
  max-height: 3em;
  /* 当内容超出max-height的高度，则隐藏 */
  overflow: hidden;
  /* 这是为了让末尾长的英文单词和中文强制显示在一行，如果超出宽度，则将超出部分强制换行 */
  word-break: break-all;
  /* 这是为了让多行内容中的按钮定位准备的 */
  position: relative;
}