核心屬性值
| 值 | 行為 |
|---|
normal | 默認，合併空白符，自動換行 |
pre | 保留所有空白符與換行，類似 <pre> 標籤 |
nowrap | 強制同一行顯示，直到遇到 <br> 或結束 |
pre-wrap | 保留空白符，自動換行 |
pre-line | 合併空白符，保留換行符 |
典型應用場景：單行文字截斷配合省略號
.ellipsis {
white-space: nowrap; /* 強制不換行 */
overflow: hidden; /* 隱藏溢出 */
text-overflow: ellipsis; /* 顯示省略號 */
width: 200px; /* 必須指定寬度 */
}
代碼示例
<div class="ellipsis">
這是一段很長的文字內容，超過容器寬度將顯示省略號...
</div>
注意事項
white-space:nowrap 僅控制換行行為，不會自動隱藏溢出內容，需配合 overflow:hidden。- 表格單元格
<td> 預設 white-space:nowrap，若需換行請顯式設置 white-space:normal。
- Flex/Grid 容器下，子項受
white-space 影響較小，主軸排列由佈局模型決定。
