CSS WebKit 浏览器超过两行自动截断显示省略号

Lasted 2020-11-29 17:18:45

-webkit-line-clamp CSS 属性可以把块容器中的内容限制为指定的行数。只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical 时才有效果。在大部分情况下，也需要设置 overflow:hidden; 否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号 “...”。

Honorificabilitu Taumatawhakatangihangakoauauotam CSS 属性 word-break 指定了怎样在单词内断行。

/*多行截断*/
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

注：

外框容器如果使用 padding 会出现如上第二种 bug。如果需要设置距离可以使用 margin 属性或者在父元素上设置。
IE 浏览器不支持 line-clamp 属性。可使用 max-height 或 JS 实现。

最好配合 CSS 自动换行属性显示内容，不然中间出现连续英文会被截取。自动换行功能如下所示：

/*按单词强制换行*/
.breakWord {
  word-break: break-word; 
  overflow-wrap: break-word;
  word-wrap: break-word;  /* IE */
}
/*按单任意字符换行*/
.breakAll {
  word-break: break-all; 
}

纯 CSS 实现多行文本截取，支持 IE 浏览器。设置 max-height 高度为截取的行数*每行的高度，如下所示：

html {
  --lh: 1.4rem;
  line-height: var(--lh);
}

.truncate-overflow {
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
}
.truncate-overflow::before {
  position: absolute;
  content: "...";
  inset-block-end: 0; /* "bottom" */
  inset-inline-end: 0; /* "right" */
}
.truncate-overflow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0; /* "right" */
  width: 1rem;
  height: 1rem;
  background: white;
}