css 文字不换行 单行文本强制不换行样式指南

核心结论，想要让 css 文字不换行，最基础属性是 white-space nowrap，这个属性可以强制文本在同一行展示，不会因为容器宽度不够自动折行，但是只加这个属性还不够，长英文、长链接、长数字这类连续字符，浏览器依然会在字符中间截断，这种情况就需要搭配 overflow hidden，text-overflow ellipsis 实现超出省略号，或者使用 word-break 相关属性控制断字规则，很多新手只写 white-space nowrap，发现长串英文还是被撑开或者截断，就是没有理解 white-space 和 word-break 的区别，white-space 控制空白和换行行为，word-break 控制单词内部是否允许断行。

基础写法 单行强制不换行

.text {

white-space: nowrap;

}

属性说明

white-space nowrap，合并连续空格，文本只保留一行，遇到容器边界不会自动换行，文本会一直横向延伸，有可能直接撑破父容器，溢出容器边界。

常用组合 不换行加超出省略号

这个是业务最常用，比如标题、列表名称，文字超出宽度之后显示省略号，必须同时三个属性一起写，缺一不可

.title {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

width: 300px;

}

要点，父元素或者当前元素必须设置固定宽度，不然元素宽度自动撑开，省略号不会出现。

长英文长数字处理补充属性

如果是连续英文单词、长网址、一串数字，只写 white-space nowrap，部分浏览器依然会把单词拆开换行，这个时候可以补充

.text {

white-space: nowrap;

overflow: hidden;

word-break: keep-all;

}

word-break keep-all，中文和英文都不在单词内部断行，适合中英文混排不换行场景

word-break normal，默认值，英文单词可以在单词边界换行

word-break break-all，允许任意字符之间断行，这个和不换行需求相反，不要混淆

属性取值对照表

常见坑点

1 只写 white-space nowrap，没有 overflow hidden，文字会撑破父盒子，页面出现横向滚动条

2 flex 布局里面子元素文字不换行失效，需要额外给子元素加 min-width 0，flex 子项默认 min-width 是 auto，会被内容撑开，导致 nowrap 不生效

3 表格 td 单元格里面文字自动换行，给 td 加 white-space nowrap，但是表格会被撑宽，需要配合 table-layout fixed 控制表格布局

4 中文文本默认可以在任意汉字间断行，white-space nowrap 可以强制中文单行不换行

问题 1 css 文字不换行，为什么加了 nowrap 长英文还是换行

回答 1 css 文字不换行，white-space nowrap 主要控制整体换行行为，长英文连续字符需要补充 word-break keep-all，才能保证 css 文字不换行，不会在单词内部拆分。

问题 2 css 文字不换行，为什么文字撑出父容器

回答 2 css 文字不换行，white-space nowrap 只是强制单行，没有裁剪溢出内容，想要限制容器宽度，需要加上 overflow hidden，才能防止 css 文字不换行之后撑破盒子。

问题 3 css 文字不换行，flex 里面 nowrap 不生效怎么办

回答 3 css 文字不换行，flex 子项默认最小宽度 auto，内容会撑开盒子，给 flex 子元素增加 min-width 0，就可以正常实现 css 文字不换行加省略号效果。

问题 4 css 文字不换行，td 单元格怎么设置 css 文字不换行

回答 4 css 文字不换行，给 td 标签增加 white-space nowrap，实现 td 里面 css 文字不换行，如果不想表格变宽，还要配合 table-layout fixed 固定表格布局。

本文仅介绍 css 文字不换行相关标准属性用法，不同浏览器版本对断字属性存在细微差异，实际项目建议多浏览器测试，css 标准后续更新属性取值可能调整，代码仅作为技术参考。