css属性white-space处理文字换行方式
2021-04-12 16:36:27
white-space属性通过控制文本空白符处理和换行行为，直接影响文字排版效果，常用值包括normal、nowrap、pre、pre-wrap和pre-line，适用于不同场景的文本布局需求。
一、white-space属性核心功能- 控制空白符处理：包括空格、制表符、换行符等是否保留或合并。
- 控制换行行为：决定文本是否自动换行或强制不换行。
- 适用场景：段落文本、导航菜单、代码展示、用户输入内容等。
normal（默认值）
空白符处理：合并连续空格和换行符（多个空格或换行视为一个）。
换行行为：文本在容器边缘自动换行。
适用场景：普通段落文本，无需保留格式时使用。
nowrap
空白符处理：合并空格和换行符。
换行行为：强制不换行，所有文本显示在同一行，可能导致内容溢出容器。
适用场景：导航栏菜单项、单行标签等需避免换行的场景。
配合属性：
overflow: hidden：隐藏溢出内容。
text-overflow: ellipsis：显示省略号（需与nowrap共用）。
pre
空白符处理：保留所有空格和换行符，行为类似<pre>标签。
换行行为：仅在遇到换行符时换行，不会自动换行。
适用场景：需要严格保留格式的文本（如ASCII艺术、固定格式日志）。
缺点：内容过长时可能导致横向滚动。
pre-wrap
空白符处理：保留空格和换行符。
换行行为：允许在必要时自动换行（如容器宽度不足）。
适用场景：代码展示、日志文件等需保留缩进和换行，同时避免横向滚动的场景。
pre-line
空白符处理：合并连续空格，但保留换行符。
换行行为：允许自动换行。
适用场景：用户输入的带换行文本（如评论、留言），需保留段落结构但简化多余空格。
- 普通段落文本：使用normal，让浏览器自动处理空白和换行。
- 导航栏菜单项：使用nowrap，防止菜单项因换行导致布局错乱。
- 代码块展示：使用pre-wrap，保留缩进和换行，同时避免横向滚动。
- 用户输入内容：使用pre-line，保留换行符但合并多余空格，提升可读性。
word-break
作用：控制长单词或URL的断行方式。
常用值：
break-all：允许在任意字符间断行（适合中文或长链接）。
keep-all：CJK文本不换行（非CJK文本按normal处理）。
适用场景：与nowrap或pre-wrap共用，解决长单词溢出问题。
overflow
作用：控制内容溢出时的显示方式。
常用值：
hidden：隐藏溢出内容。
auto：显示滚动条（仅在内容溢出时）。
适用场景：与nowrap共用，防止内容撑开容器。
text-overflow
作用：定义文本溢出时的省略方式。
常用值：ellipsis（显示省略号）。
适用场景：与nowrap和overflow: hidden共用，实现单行文本省略效果。
- white-space是文本布局的核心属性，通过选择合适的值（如normal、nowrap、pre-wrap等），可精准控制空白符和换行行为。
- 结合word-break、overflow等属性，可进一步优化长单词、URL的显示效果，避免布局错乱。
- 根据场景选择值：普通文本用normal，代码展示用pre-wrap，用户输入用pre-line，导航菜单用nowrap。
热门标签
