CSS 文字溢出 (Text Overflow)

當文字內容超出容器範圍時，CSS 提供多種屬性來控制文字的換行和溢出行為。

text-overflow

text-overflow 設定當文字溢出時如何顯示。需要搭配 overflow: hidden 和 white-space: nowrap 使用才有效果。

.ellipsis {
  white-space: nowrap;     /* 不換行 */
  overflow: hidden;        /* 隱藏溢出內容 */
  text-overflow: ellipsis; /* 顯示 ... */
}

.clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;     /* 直接裁切（預設） */
}

單行文字省略

最常見的用法是單行文字超出時顯示省略號：

.single-line-ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p class="single-line-ellipsis">這是一段很長很長的文字，超出部分會顯示省略號</p>
<!-- 顯示：這是一段很長很長的文... -->

多行文字省略

多行文字省略需要使用 -webkit-line-clamp：

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    /* 顯示 3 行 */
  overflow: hidden;
}

white-space

white-space 控制空白字元和換行的處理方式。

.nowrap {
  white-space: nowrap;    /* 不換行，文字在同一行 */
}

.normal {
  white-space: normal;    /* 正常換行（預設） */
}

.pre {
  white-space: pre;       /* 保留空白和換行 */
}

.pre-wrap {
  white-space: pre-wrap;  /* 保留空白，必要時換行 */
}

.pre-line {
  white-space: pre-line;  /* 合併空白，保留換行 */
}

overflow-wrap / word-wrap

overflow-wrap (舊名 word-wrap) 控制是否在單字內部換行，避免長單字溢出容器。

.break-word {
  overflow-wrap: break-word;  /* 長單字可在任意位置換行 */
}

.normal {
  overflow-wrap: normal;      /* 只在正常斷點換行（預設） */
}

<div style="width: 100px; overflow-wrap: break-word;">
  ThisIsAVeryLongWordThatWillBreak
</div>
<!-- 長單字會被拆開換行 -->

word-break

word-break 控制單字的換行規則。

.break-all {
  word-break: break-all;   /* 可在任何字元處換行（適合 CJK 文字） */
}

.keep-all {
  word-break: keep-all;    /* 不在單字內換行（CJK 文字不在標點外換行） */
}

.normal {
  word-break: normal;      /* 預設規則 */
}

overflow-wrap vs word-break 的差異

• overflow-wrap: break-word：只有在單字太長放不下時才會斷字
• word-break: break-all：會積極地在任何位置斷字

/* 推薦：較為優雅的處理方式 */
.text {
  overflow-wrap: break-word;
}

/* 激進：會在任何位置斷字 */
.text-aggressive {
  word-break: break-all;
}

hyphens（連字符）

hyphens 控制是否在換行時加上連字符號。

.auto-hyphens {
  hyphens: auto;    /* 自動加上連字符 */
  lang: en;         /* 需要指定語言 */
}

.manual {
  hyphens: manual;  /* 只在 ­ 處加連字符 */
}

.none {
  hyphens: none;    /* 不加連字符 */
}

實用範例

卡片標題

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

文章摘要

.article-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
}

避免長網址破版

.url {
  word-break: break-all;
}

/* 或 */
.url {
  overflow-wrap: break-word;
}

表格文字

td {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

完整的文字溢出處理

結合多個屬性來處理各種情況：

.text-container {
  /* 限制寬度 */
  max-width: 300px;
  
  /* 處理長單字 */
  overflow-wrap: break-word;
  
  /* 或者單行省略 */
  /* white-space: nowrap; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
}