CSS 文字排版屬性詳解：text-overflow 和 white-space

CSS 文字排版屬性詳解：text-overflow 和white-space

在網頁設計中，文字排版是一個非常重要的環節，透過合理的排版可以使文本更易讀、更美觀。 CSS 提供了一些屬性來控製文字的顯示方式，其中包括 text-overflow 和 white-space。本文將詳細介紹這兩個屬性的用法和範例程式碼。

一、text-overflow 屬性

text-overflow 屬性用來控制當文字超出容器時的顯示方式。常見的取值有以下幾種：

1. clip：預設值，超出容器的部分將會被裁切。
2. ellipsis：超出容器的部分將以省略號（...）顯示。
3. string：可以自訂顯示的字串。

下面是範例程式碼：

<style>
  .container {
    width: 200px;
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden; /* 超出容器部分隐藏 */
    text-overflow: ellipsis; /* 超出部分以省略号显示 */
  }
</style>

<div class="container">
  This is a long text that should be truncated with an ellipsis when it overflows.
</div>

在上面的程式碼中，我們使用了一個容器，並設定了寬度為 200px，文字內容為一個長句子。透過設定 white-space 屬性為 nowrap，表示強制不換行，overflow 屬性為 hidden，表示超出容器的部分隱藏。最重要的是 text-overflow 屬性，我們將其設為 ellipsis，表示超出部分以省略號顯示。

二、white-space 屬性

white-space 屬性用於控製文字的空白符處理方式。常見的取值有以下幾種：

1. normal：預設值，自動處理空格符，合併連續的空白符為一個空格，換行符和製表符也被當作空格處理。
2. nowrap：強制不換行，合併連續的空白符為一個空格。
3. pre：保留原始的空白符，保持文字的空白符格式。
4. pre-wrap：保留原始的空白符，允許換行，文字將按照原始格式顯示。
5. pre-line：自動處理空白符，但保留換行符，允許換行，文字將按照原始格式顯示。

下面是範例程式碼：

<style>
  .container {
    white-space: pre-wrap; /* 保留原始的空白符，允许换行 */
  }
</style>

<div class="container">
  This is a long text that should wrap when it reaches the container's width.
</div>

在上面的程式碼中，我們使用了一個容器，並設定了white-space 屬性為pre-wrap，這樣文字就會保留原始的空白符，允許換行。

透過使用 text-overflow 和 white-space 這兩個屬性，我們可以更靈活地控製文字的排版，使其更美觀、更易讀。在實際的網頁設計中，我們可以根據需要選擇合適的取值，並根據範例程式碼進行偵錯。

總結：

text-overflow 和 white-space 是 CSS 中用來控製文字排版的屬性。 text-overflow 用來控制當文字超出容器時的顯示方式，常見的取值有clip、ellipsis 和string；white-space 用來控製文字的空白符處理方式，常見的取值有normal、nowrap、pre、 pre-wrap 和pre-line。透過合理地應用這兩個屬性，我們可以達到更好的文字排版效果。

以上是CSS 文字排版屬性詳解：text-overflow 和 white-space的詳細內容。更多資訊請關注PHP中文網其他相關文章！