CSS line-clamp

- WD

CSS 屬性,與 display: -webkit-box 搭配使用時,會將文字限制在指定行數中。若包含 text-overflow: ellipsis,文字將以省略號作結尾。

Chrome

  1. 4 - 13: 支援狀況不明
  2. 14 - 123: 已支援
  3. 124: 已支援
  4. 125 - 127: 已支援

Edge

  1. 12 - 16: 未支援
  2. 17 - 18: 已支援
  3. 79 - 123: 已支援
  4. 124: 已支援

Safari

  1. 3.1 - 4: 未支援
  2. 5 - 17.3: 已支援
  3. 17.4: 已支援
  4. 17.5 - TP: 已支援

Firefox

  1. 2 - 67: 未支援
  2. 68 - 124: 已支援
  3. 125: 已支援
  4. 126 - 128: 已支援

Opera

  1. 9 - 12.1: 未支援
  2. 15 - 108: 已支援
  3. 109: 已支援

IE

  1. 5.5 - 10: 未支援
  2. 11: 未支援

Chrome for Android

  1. 124: 已支援

Safari on iOS

  1. 3.2 - 4.3: 未支援
  2. 5 - 17.3: 已支援
  3. 17.4: 已支援
  4. 17.5: 已支援

Samsung Internet

  1. 4 - 23: 已支援
  2. 24: 已支援

Opera Mini

  1. all: 未支援

Opera Mobile

  1. 10 - 12.1: 未支援
  2. 80:支援

UC 瀏覽器 for Android

  1. 15.5:支援

Android 瀏覽器

  1. 2.1 - 2.2:支援未知
  2. 2.3 - 4.4.4:支援
  3. 124: 已支援

Firefox for Android

  1. 125: 已支援

QQ 瀏覽器

  1. 14.9:支援

百度瀏覽器

  1. 13.52:支援

KaiOS 瀏覽器

  1. 2.5:不支援
  2. 3:支援

較舊的 Opera 瀏覽器(基於 presto)版本也支援使用 text-overflow 的專有 -o-ellipsis-lastline; 值來產生相同的效果。

資源
CSS Tricks 文章