前端同事调订单列表，一个 40 位的物流单号把单元格撑到两屏宽，横向滚动条一拉，表头全对不上。查了半天字号和列宽，最后是 white-space 的默认值 normal 在作怪：它只在空格和换行符处折行，一长串没有空格的英文数字直接顶出去。

改之前先弄清六个取值的差别，改错一个，要么不换行，要么空白全乱。

六个取值，差别在空白和折行

  • normal：合并连续空格，允许在空格处折行
  • nowrap：合并空格，完全不折行
  • pre：原样保留空格和换行，只在源码里的换行处断
  • pre-wrap：保留空白，同时允许自动折行
  • pre-line：合并空格，但保留换行符
  • break-spaces：行尾空格也占位，折行时不会被吞掉

中文和英文混排还有个细节：normal 下浏览器可以在任意汉字之间断行，但一长串英文单词或 URL 不会断，除非再加 word-break: break-all 或者 overflow-wrap: anywhere。

nowrap 必须配 overflow 和省略号

只写 white-space: nowrap，内容会溢出到容器外，压住旁边那列，看着像布局错乱。要出省略号得三件套齐全：nowrap、overflow: hidden、text-overflow: ellipsis，缺一个都不生效。

.cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

表格里最麻烦的是 table-layout: auto，nowrap 的列会把整张表撑宽，别的列被挤扁。要么给表格加 table-layout: fixed 并设好列宽，要么在单元格里再套一层 div，把省略做在内层。

pre 的 white-space 会继承

pre 元素默认就是 white-space: pre，里面的 span、code 全部继承这条规则。做日志展示想让它自动换行，得在 pre 上改成 pre-wrap，光改内层元素没用。反过来，代码块想保留缩进又不想横向滚动，pre-wrap 最省事。

取舍很清楚：ID、URL、单号这类不能断的用 nowrap 加省略号，让用户悬停看全；日志和多行文本用 pre-wrap，保留格式又不撑破页面。