文字環繞

開放

8.1 屬性 text-overflow

文字環繞和控制其顯示是網頁設計中非常重要的方面,特別是當你在處理長文本行或有限空間的容器時。屬性 text-overflowwhite-spaceword-wrap(現在稱為 overflow-wrap)允許你控制在這種情況下文字的行為。

屬性 text-overflow 管理超出容器邊界的文字顯示方式。它與 white-spaceoverflow 屬性結合使用,以創造文字截斷效果並添加省略號。

值:

  • clip: 截斷超出容器邊界的文字
  • ellipsis: 在截斷的文字末尾添加省略號(...)

使用範例:

CSS
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #000;
}

.clip {
  text-overflow: clip;
}

.ellipsis {
  text-overflow: ellipsis;
}
HTML
<body>
  <div class="container clip">這段文字會被截斷在容器的邊界。</div>
  <div class="container ellipsis">這段文字會被截斷並以省略號取代。</div>
</body>

8.2 屬性 white-space

屬性 white-space 控制空白符號和文本換行的處理。它允許你設定空白、tab 和新行在文本中的處理方式。

值:

  • normal: 空白和換行照常處理(預設)
  • nowrap: 文字在一行中顯示,不換行
  • pre: 空白和換行會被保留,就像在 HTML 標籤 <pre> 中一樣
  • pre-wrap: 空白和換行會被保留,但文字可以在必要時換行
  • pre-line: 換行會被保留,但空白照常處理
  • break-spaces: 空白和換行會被保留,長空白可以導致換行

使用範例:

CSS
.normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}
HTML
<body>
  <div class="normal">這段文字會換到下一行,如果空間不足的話。</div>
  <div class="nowrap">這段文字不會換到下一行,會在一行中顯示。</div>
  <div class="pre">
    這段文字     會保留

    所有空白和換行。
  </div>

  <div class="pre-wrap">
    這段文字會換到下一行,但也會保留

    所有空白和換行。
  </div>
</body>

8.3 屬性 overflow-wrap

屬性 overflow-wrap(以前稱為 word-wrap)控制超出容器邊界的單詞換行。它可以防止長單詞造成容器溢出,這些單詞無法被分割。

  • normal: 單詞按照標準換行規則進行換行
  • break-word: 即使需要分割單詞,也可以進行換行

使用範例:

CSS
.container {
  width: 200px;
  border: 1px solid #000;
}

.normal {
  overflow-wrap: normal;
}

.break-word {
  overflow-wrap: break-word;
}
HTML
<body>
  <div class="container normal">這段文字會換到下一行,如果空間不足的話。</div>
  <div class="container break-word">這個很長的單詞不會換行在下一行,如果空間不足。</div>
</body>

代碼說明:

  • overflow-wrap: normal;: 單詞按照標準規則換行,不會分割單詞
  • overflow-wrap: break-word;: 長單詞會被分割並換到下一行,如有需要

8.4 屬性的結合使用

屬性 text-overflowwhite-spaceword-wrap 經常一起使用,以達到有限空間容器中所需的文本顯示效果。

使用範例:

CSS
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  border: 1px solid #000;
}
HTML
<body>
  <div class="container">這段文字會被截斷並以省略號取代,如果容器空間不足。</div>
</body>

代碼說明:

  • white-space: nowrap;: 文字在一行中顯示,不換行
  • overflow: hidden;: 隱藏超出容器邊界的文字
  • text-overflow: ellipsis;: 在截斷的文字末尾添加省略號
  • overflow-wrap: break-word;: 長單詞會被分割並換到下一行,如有需要
1
任務
Frontend SELF TW,  等級 15課堂 3
上鎖
文本裁剪
文本裁剪
1
任務
Frontend SELF TW,  等級 15課堂 3
上鎖
文字換行
文字換行
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言