html如何設置文字超出換行

# HTML如何設置文字超出換行

在網頁開發中，處理文字內容超出容器邊界時的換行問題是一個常見需求。本文將介紹幾種通過HTML和CSS實現文字超出自動換行的解決方案。

## 1. 使用`word-wrap`或`overflow-wrap`屬性

```css
.text-container {
  word-wrap: break-word; /* 舊版瀏覽器 */
  overflow-wrap: break-word; /* 現代標準 */
}

這兩個屬性允許長單詞或URL在到達容器邊界時斷開并換行。區別在于： - word-wrap是舊屬性（CSS3之前） - overflow-wrap是CSS3標準屬性

2. 使用white-space屬性

.pre-wrap {
  white-space: pre-wrap; /* 保留空白符但允許換行 */
}

.normal {
  white-space: normal; /* 默認值，合并空白符并自動換行 */
}

特別說明： - white-space: nowrap會強制不換行 - pre-wrap會保留源代碼中的換行和空格

3. 使用word-break屬性

.break-all {
  word-break: break-all; /* 任意字符處換行 */
}

.keep-all {
  word-break: keep-all; /* CJK文本不換行 */
}

適用于： - 處理包含連續字母或數字的長字符串 - 中日韓(CJK)文本的特殊處理

4. 結合text-overflow處理單行文本

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出顯示省略號 */
}

5. 響應式設計的注意事項

建議添加以下通用樣式：

body {
  overflow-wrap: break-word;
  hyphens: auto; /* 支持連字符換行 */
}

實際應用示例

<div class="text-box" style="width: 200px; border: 1px solid #ccc;">
  這是一個非常非常非常非常非常非常非常非常非常長的文本內容
</div>

<style>
  .text-box {
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 10px;
  }
</style>

瀏覽器兼容性提示

1. 大部分現代瀏覽器都支持上述屬性
2. 對于老舊IE瀏覽器(IE8及以下)，建議使用word-wrap: break-word
3. hyphens屬性需要添加-webkit-和-moz-前綴

通過合理組合這些CSS屬性，可以確保網頁文本在各種容器和屏幕尺寸下都能正確換行顯示，提升內容的可讀性和頁面的整體美觀度。 “`