当前位置：首页 > news >正文

CSS 中 white-space 用于控制元素内空白符（空格、制表符、换行符）的处理方式以及文本的换行行为

news 2025/9/13 5:29:27

CSS white-space 属性详解

white-space 是 CSS 中一个非常有用的属性，用于控制元素内空白符（空格、制表符、换行符）的处理方式以及文本的换行行为。

核心功能演示

下面我将通过一个可视化示例展示 white-space 不同值的具体效果：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS white-space 属性详解</title><style>* {box-sizing: border-box;margin: 0;padding: 0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);color: #333;line-height: 1.6;padding: 30px;min-height: 100vh;}.container {max-width: 1200px;margin: 0 auto;background: white;border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);overflow: hidden;}header {background: #4a6fa5;color: white;padding: 30px;text-align: center;}h1 {font-size: 2.5rem;margin-bottom: 15px;}.intro {font-size: 1.2rem;max-width: 800px;margin: 0 auto 25px;line-height: 1.6;}.properties {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px;padding: 30px;}.property {background: #f8f9fa;border-radius: 10px;padding: 25px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);transition: transform 0.3s ease;}.property:hover {transform: translateY(-5px);}.property h2 {color: #4a6fa5;margin-bottom: 15px;font-size: 1.5rem;border-bottom: 2px solid #4a6fa5;padding-bottom: 10px;}.property p {margin-bottom: 15px;color: #555;}.example {background: #2c3e50;color: #ecf0f1;padding: 20px;border-radius: 8px;font-family: 'Courier New', Courier, monospace;white-space: pre;overflow-x: auto;margin: 15px 0;}.demo {background: white;border: 2px dashed #4a6fa5;padding: 15px;border-radius: 8px;margin-top: 15px;min-height: 100px;}.demo.normal { white-space: normal; }.demo.nowrap { white-space: nowrap; }.demo.pre { white-space: pre; }.demo.pre-wrap { white-space: pre-wrap; }.demo.pre-line { white-space: pre-line; }.demo.break-spaces { white-space: break-spaces; }.visual-guide {background: #eef2f7;padding: 30px;margin-top: 30px;border-top: 1px solid #dde4ec;}.guide-container {display: flex;justify-content: space-between;flex-wrap: wrap;gap: 20px;margin-top: 20px;}.guide-item {flex: 1;min-width: 250px;background: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}.guide-item h3 {color: #4a6fa5;margin-bottom: 15px;}footer {text-align: center;padding: 25px;background: #2c3e50;color: #ecf0f1;margin-top: 30px;}@media (max-width: 768px) {.properties {grid-template-columns: 1fr;}.guide-container {flex-direction: column;}}</style>
</head>
<body><div class="container"><header><h1>CSS white-space 属性详解</h1><p class="intro">white-space 属性用于控制元素内空白符（空格、制表符、换行符）的处理方式以及文本的换行行为。下面展示了不同属性值的效果和用法。</p></header><div class="properties"><div class="property"><h2>normal (默认)</h2><p>合并连续的空白符，忽略换行符，文本自动换行。</p><div class="example">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div><div class="demo normal">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div></div><div class="property"><h2>nowrap</h2><p>合并连续的空白符，但防止文本换行，除非使用&lt;br&gt;标签。</p><div class="example">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div><div class="demo nowrap">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div></div><div class="property"><h2>pre</h2><p>保留所有空白符和换行，类似&lt;pre&gt;标签，文本只在有换行符的地方换行。</p><div class="example">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div><div class="demo pre">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div></div><div class="property"><h2>pre-wrap</h2><p>保留所有空白符和换行，但文本也会自动换行。</p><div class="example">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div><div class="demo pre-wrap">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div></div><div class="property"><h2>pre-line</h2><p>合并连续的空白符，但保留换行符，文本也会自动换行。</p><div class="example">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div><div class="demo pre-line">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div></div><div class="property"><h2>break-spaces</h2><p>与pre-wrap类似，但任何保留的空白符序列都会占用空间，包括在行尾。</p><div class="example">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div><div class="demo break-spaces">这是一段  有很多  空格   和
换行的文本，观察空白符如何处理。</div></div></div><div class="visual-guide"><h2 style="text-align: center; color: #2c3e50;">white-space 属性值比较</h2><div class="guide-container"><div class="guide-item"><h3>空白符处理</h3><p><strong>合并连续空白：</strong> normal, nowrap, pre-line</p><p><strong>保留所有空白：</strong> pre, pre-wrap, break-spaces</p></div><div class="guide-item"><h3>换行处理</h3><p><strong>文本自动换行：</strong> normal, pre-wrap, pre-line, break-spaces</p><p><strong>文本不自动换行：</strong> nowrap, pre</p></div><div class="guide-item"><h3>换行符处理</h3><p><strong>保留换行符：</strong> pre, pre-wrap, pre-line, break-spaces</p><p><strong>忽略换行符：</strong> normal, nowrap</p></div></div></div><footer><p>CSS white-space 属性详解 &copy; 2023</p></footer></div>
</body>
</html>