在CSS的排版规则中，默认情况下文本到达容器边界时会自动换行，而white-space: nowrap可以直接修改这个默认行为，让文本强制在容器内保持单行显示，不会随着容器宽度不足而自动折行。这个属性在需要保持文本完整性的场景中非常实用，比如单行导航、单行标签等。
white-space: nowrap 的基本用法
使用white-space: nowrap的方式非常简单，只需要给目标文本所在的容器添加这个CSS属性即可。下面是一个最基础的示例，对比默认换行和禁止换行的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 200px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.default-wrap {
/* 默认换行，不需要额外设置 */
}
.no-wrap {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container default-wrap">
这是一段很长的测试文本，用来查看默认的换行效果
</div>
<div class="container no-wrap">
这是一段很长的测试文本，用来查看禁止换行的效果
</div>
</body>
</html>
上面的代码中，第一个容器使用默认的换行规则，文本会在容器宽度不足时自动折行；第二个容器添加了white-space: nowrap，文本会保持单行显示，超出容器宽度的部分会溢出容器。
常见使用场景
1. 单行导航栏文字
很多网站的导航栏需要保持所有文字在同一行，不会因为页面宽度变小而折行，这时候就可以给导航容器添加white-space: nowrap：
.nav {
white-space: nowrap;
overflow-x: auto; /* 如果导航内容过长，允许横向滚动 */
}
.nav-item {
display: inline-block;
margin-right: 20px;
}
2. 表格单元格单行显示
表格中如果某一列的内容过长，希望保持单行显示，避免表格被撑开，也可以给对应的单元格设置这个属性：
td.single-line {
white-space: nowrap;
max-width: 150px; /* 限制单元格最大宽度 */
overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
需要注意的问题
文本溢出处理
使用white-space: nowrap之后，文本超出容器宽度时会溢出容器，这时候通常需要配合overflow和text-overflow属性来处理溢出内容，避免影响页面布局：
overflow: hidden：隐藏超出容器的文本text-overflow: ellipsis：让超出的文本显示省略号overflow-x: auto：允许容器横向滚动查看完整文本
下面是一个完整的溢出处理示例：
.text-ellipsis {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #eee;
}
兼容性说明
white-space: nowrap是CSS2.1就引入的属性，目前所有主流浏览器都支持这个取值，包括Chrome、Firefox、Safari、Edge以及IE8及以上版本的IE浏览器，不需要添加浏览器前缀，可以放心使用。
对空白字符的影响
需要注意white-space: nowrap不仅会禁止文本换行，还会合并连续的空白字符，并且保留文本中的换行符。如果需要保留空白字符的原始格式，需要结合其他white-space的取值，或者使用pre相关的属性值。
总结
white-space: nowrap是CSS中控制文本禁止换行的简单高效属性，使用方式直接，兼容性好。在实际使用中，只需要给目标容器添加这个属性，再配合溢出处理的相关属性，就可以满足大部分单行文本显示的需求。开发者可以根据具体的场景选择合适的溢出处理方式，让页面布局更符合预期。
CSSwhite-space_nowrap文本换行前端布局修改时间：2026-06-21 23:27:30