1
應用層次分析
2
│
3
├─ 靜態內容層
4
│  ├─ 來源：官方
5
│  ├─ 變動：低
6
│  └─ 方案：簡化型 ✓ 快速、高效
7
│
8
└─ 動態內容層
9
   ├─ 來源：用戶
10
   ├─ 變動：高
11
   └─ 方案：高級型 ✓ 精確、自適應

1
原始文本（5 行）：
2
┌─────────────────────┐
3
│ Line 1              │
4
│ Line 2              │
5
│ Line 3              │
6
│ Line 4              │
7
│ Line 5 more button  │
8
└─────────────────────┘
9

10
第一層 mask（垂直）：
11
┌─────────────────────┐
12
│ ░░░░░░░░░░░░░░░░░░░ │  ← 透明（line-height 高度）
13
│ ███████████████████ │  ← 不透明
14
│ ███████████████████ │
15
│ ███████████████████ │
16
│ ███████████████████ │
17
└─────────────────────┘
18

19
第二層 mask（右下漸隱）：
20
┌─────────────────────┐
21
│ ███████████████████ │
22
│ ███████████████████ │
23
│ ███████████████████ │
24
│ ███████░░░░░░░░░░░░ │  ← 漸變區
25
│ ░░░░░░░░░░░░░░░░░░░ │  ← 完全透明
26
└─────────────────────┘
27

28
最終效果（兩層疊加）：
29
┌─────────────────────┐
30
│ ░░░░░░░░░░░░░░░░░░░ │  ← 第一層切掉
31
│ ███████████████████ │
32
│ ███████████████████ │
33
│ ███████░░░░░░░░░░░░ │  ← 第二層淡出
34
│ ░░░░░░░░░░░░░░░░░░░ │  ← 完全隱藏
35
└─────────────────────┘

1
/* "MORE" 按鈕寬度的像素值 */
2
var(--link-length) * var(--one-ch, 8) * 1px
3
= 4 * 8 * 1px
4
= 32px
5

6
/* 漸隱終止位置 */
7
(var(--link-length) * var(--one-ch, 8) + var(--line-height) * 2) * 1px
8
= (32px + 16px * 2)
9
= 64px
10
/*
11
  --link-length * --one-ch = 按鈕寬度
12
  --line-height * 2 = 兩行高度（預留空間）
13
  總共：按鈕寬度 + 預留空間
14
*/

1
.with-more-button {
2
  --one-ch: 8px;    /* 英文、拉丁文 */
3
}
4

5
.with-more-button[lang="zh"],
6
.with-more-button[lang="ja"],
7
.with-more-button[lang="ko"] {
8
  --one-ch: 16px;   /* 東亞文字 */
9
}

1
.with-more-button {
2
  -webkit-mask: /* 雙層漸變 */;
3
  mask: /* 雙層漸變 */;
4
}

1
@media (-webkit-min-device-pixel-ratio: 2) {
2
  .with-more-button {
3
    --one-ch: 16px;  /* 調整 DPR */
4
  }
5
}

1
首屏時間：最小化（無複雜計算）
2
重排（Reflow）：低
3
重繪（Repaint）：低
4
GPU 使用：最小
5
總體評分：⭐⭐⭐⭐⭐ 優秀

1
首屏時間：稍微增加（mask 計算）
2
重排（Reflow）：低
3
重繪（Repaint）：中（mask 更新時）
4
GPU 使用：中（mask 需要 GPU 加速）
5
總體評分：⭐⭐⭐⭐ 良好

1
.with-more-button {
2
  will-change: mask;  /* 提示瀏覽器預先優化 */
3
}

1
// ❌ 不要這樣做
2
element.style.setProperty('--line-height', '16px');
3
element.style.setProperty('--link-length', '4');
4

5
// ✅ 這樣做更好
6
element.style.cssText = `
7
  --line-height: 16px;
8
  --link-length: 4;
9
`;

1
.truncate-wrapper {
2
  contain: layout style paint;  /* 限制重排範圍 */
3
}

1
<style>
2
  .app-description {
3
    position: relative;
4
    padding-bottom: 40px;
5
  }
6

7
  .app-description.truncated {
8
    max-height: 150px;
9
    overflow: hidden;
10
  }
11

12
  .app-description button {
13
    position: absolute;
14
    bottom: 0;
15
    right: 0;
16
    background: linear-gradient(
17
      270deg,
18
      var(--page-bg, white) 72%,
19
      transparent 100%
20
    );
21
    color: var(--key-color, #0066cc);
22
    padding: 0 20px;
23
    border: none;
24
    cursor: pointer;
25
  }
26
</style>
27

28
<div class="app-description truncated">
29
  <p>Learn a new language...</p>
30
  <button>more</button>
31
</div>

1
<style>
2
  .comment-container {
3
    --lines: 5;
4
    --line-height: 16;
5
    --link-length: 4;
6
    --one-ch: 8;
7
  }
8

9
  .comment-text {
10
    mask:
11
      linear-gradient(
12
        0deg,
13
        transparent 0,
14
        transparent calc(var(--line-height) * 1px),
15
        #000 calc(var(--line-height) * 1px)
16
      ),
17
      linear-gradient(
18
        270deg,
19
        transparent 0,
20
        transparent calc(
21
          var(--link-length) * var(--one-ch) * 1px
22
        ),
23
        #000 calc(
24
          (var(--link-length) * var(--one-ch) +
25
           var(--line-height) * 2) * 1px
26
        )
27
      );
28
    -webkit-mask: var(--mask-value);
29
    mask-position: right bottom;
30
    mask-repeat: no-repeat;
31
    position: relative;
32
  }
33

34
  .comment-more-btn {
35
    position: absolute;
36
    bottom: 0;
37
    right: 0;
38
    background: var(--page-bg, white);
39
    color: var(--key-color, #0066cc);
40
    padding: 0 20px;
41
    border: none;
42
    cursor: pointer;
43
  }
44
</style>
45

46
<div class="comment-container">
47
  <p class="comment-text">I have been using Duolingo...</p>
48
  <button class="comment-more-btn">MORE</button>
49
</div>