CSS是否换行如何控制_white-space实现文本换行或不换行-css教程-PHP中文网

CSS是否换行如何控制_white-space实现文本换行或不换行

P粉602998670

发布： 2025-11-29 20:28:47

原创

930人浏览过

通过 white-space 属性控制文本换行：normal 自动换行并合并空格；nowrap 强制不换行，配合 text-overflow 可显示省略号；pre 保留所有空白符和换行；pre-wrap 保留格式且允许自动换行，适合代码或用户输入；pre-line 合并空格但保留换行。实际应用中，单行文本用 nowrap，多行内容用 pre-wrap，普通文本用 normal，可精准控制文本显示效果。

css是否换行如何控制_white-space实现文本换行或不换行

在CSS中控制文本是否换行，主要通过 white-space 属性来实现。这个属性决定了元素内的空白字符（如空格、换行符）如何处理，以及文本是否自动换行。以下是常用取值及其效果说明。

white-space 常用取值及作用

以下是最常见的 white-space 取值，适用于不同场景下的换行控制：

normal：默认值。合并连续的空白符，文本在容器边界处自动换行。
nowrap：合并空白符，但强制不换行。文本会在同一行显示，超出容器也不换行。
pre：保留所有空白符和换行符，行为类似HTML中的 <pre> 标签，只在遇到换行符或
时换行。
pre-wrap：保留空白符和换行符，允许在必要时自动换行，适合长文本保留格式的同时适应容器宽度。
pre-line：合并连续空格，但保留换行符，并允许自动换行。

控制不换行：使用 nowrap

如果你希望文本始终在同一行显示，即使内容很长，可以设置：

white-space: nowrap;

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

217

查看详情

常用于导航菜单、标签、按钮等需要保持单行显示的场景。配合 overflow: hidden 和 text-overflow: ellipsis 可实现超出部分显示省略号：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

登录后复制

控制换行：使用 pre-wrap 或 normal

当希望文本自动换行，尤其是包含空格或换行符的内容，推荐使用：

white-space: pre-wrap;

它能保留原始文本的格式（比如代码、地址等），同时在容器边界处自动折行，避免溢出。适用于用户输入的多行文本展示。如果只是普通文本内容，使用默认的 normal 就足够，浏览器会自动处理换行。

实际应用场景建议

单行文本 + 省略号：用 white-space: nowrap 配合 text-overflow
代码块或格式化文本：用 white-space: pre 或 pre-wrap
用户评论、日志等多行内容：推荐 pre-wrap，保留换行且自适应宽度
去除多余空格并正常换行：保持默认 normal 即可

基本上就这些。掌握 white-space 的不同取值，能精准控制文本的换行行为，提升页面排版的灵活性和可读性。

以上就是CSS是否换行如何控制_white-space实现文本换行或不换行的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css中flex-flow属性是什么 css中counter-reset属性是什么 css中word-break属性是什么 css相邻兄弟选择器是什么 css中flex-basis属性是什么