white-space 是一個 CSS 屬性，用于控制元素中的空白字符（例如空格、制表符、換行符等）的處理方式。該屬性主要影響文本內容的折行和空白字符的顯示。
white-space 屬性有以下值：
normal：默認值。連續(xù)的空白字符會被合并為一個空格，根據元素的寬度自動換行。nowrap：連續(xù)的空白字符會被合并為一個空格，但文本內容不會自動換行。如果文本超出了元素的寬度，它將溢出元素邊界。pre：保留所有空白字符（包括換行符），文本內容不會自動換行。如果文本超出了元素的寬度，它將溢出元素邊界。pre-wrap：保留所有空白字符（包括換行符），根據元素的寬度自動換行。pre-line：合并連續(xù)的空白字符為一個空格，但保留換行符。根據元素的寬度自動換行。
以下是幾個使用 white-space 屬性的示例：
css代碼/* 不換行，合并連續(xù)的空白字符為一個空格 */.no-wrap { white-space: nowrap;
}/* 保留所有空白字符，不自動換行 */.pre { white-space: pre;
}/* 保留所有空白字符，自動換行 */.pre-wrap { white-space: pre-wrap;
}/* 保留換行符，合并連續(xù)的空白字符為一個空格，自動換行 */.pre-line { white-space: pre-line;
}使用這些 CSS 類，可以根據需要為 HTML 元素設置不同的空白字符處理方式。下面是一個簡單的 HTML 示例，展示了如何將上面定義的 CSS 類應用到不同的元素，以便更好地理解 white-space 屬性的作用：
html代碼<!DOCTYPE html><html><head><style>
/* 不換行，合并連續(xù)的空白字符為一個空格 */
.no-wrap { white-space: nowrap;
} /* 保留所有空白字符，不自動換行 */
.pre { white-space: pre;
} /* 保留所有空白字符，自動換行 */
.pre-wrap { white-space: pre-wrap;
} /* 保留換行符，合并連續(xù)的空白字符為一個空格，自動換行 */
.pre-line { white-space: pre-line;
}</style></head><body><p>默認（normal）：這個元素的文本將根據容器寬度自動換行，連續(xù)的空白字符會被合并。</p><p class="no-wrap">nowrap：這個元素的文本不會自動換行，連續(xù)的空白字符會被合并。</p><pre class="pre">pre：這個元素的文本將保留所有空白字符，不會自動換行。</pre><p class="pre-wrap">pre-wrap：這個元素的文本將保留所有空白字符，根據容器寬度自動換行。</p><p class="pre-line">pre-line：這個元素的文本將保留換行符，連續(xù)的空白字符會被合并，根據容器寬度自動換行。</p></body></html>在這個示例中，我們創(chuàng)建了五個段落元素，分別展示了不同 white-space 屬性值的效果。您可以將此代碼粘貼到一個 HTML 文件中，然后在瀏覽器中查看效果。
需要注意的是，當調整瀏覽器窗口大小時，具有 normal、pre-wrap 和 pre-line 屬性值的元素將根據容器寬度自動換行，而 nowrap 和 pre 屬性值將保持不換行。此外，pre 和 pre-wrap 屬性值將保留所有空白字符，包括多個空格、制表符和換行符。
聲明本文內容來自網絡,若涉及侵權,請聯(lián)系我們刪除! 投稿需知:請以word形式發(fā)送至郵箱[email protected]
我在我的HAOEI.COM主頁和雅虎NCP添加了鏈接