CSS WebKit 瀏覽器超過兩行自動截斷顯示省略號

最近更新時間 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;
}

CSS WebKit 瀏覽器超過兩行自動截斷顯示省略號

可能喜歡