单/多行文本溢出时显示省略号

147 阅读1分钟

单行处理代码展示:

image.png 注意点:单行文本溢出显示省略号 一定记得给固定的宽度

CSS主要生成代码:

  /* 1.超出的文本强制在一行显示 */
  white-space: nowrap;
  /* 2.超出部分隐藏 */
  overflow: hidden;
  /* 3.显示省略号 */
  /* ellipsis 省略号 */
  text-overflow: ellipsis;`
 

多行处理代码展示:

image.png

注意点:多行文本溢出要给固定高度,在实际开发中建议后端处理

CSS主要生成代码:

  /* 溢出隐藏 */
  overflow: hidden;
  /* 先省略号 */
  text-overflow: ellipsis;
  /* 弹性盒子模型 */
  display: -webkit-box;
  /* 第几行显示省略号 写数字几就表示第几行显示省略号*/
  -webkit-line-clamp: 2;
  /* 浏览器兼容性 */
  -webkit-box-orient: vertical;