什么是首选最小宽度?

"首选最小宽度",指的是元素最适合的最小宽度。

  • 东亚文字(如中文)最小宽度为每个汉字的宽度。
  • 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元,一般会终止于空格(普通空格)、短横线、问号以及其他非英文字符等。
  • 如果想让英文字符和中文一样,每一个字符都用最小宽度单元,可以试试使用 CSS 中的 word-break: break-all。
word-break: break-all;

补充:

  • 首选最小宽度会影响 display: inline-block / table-cell 等元素的布局,因此设置 white-space: nowrap 时容器会被"内容撑开",从而出现意料之外的横向滚动条。
  • 想避免被长字符串撑开,可以配合 overflow-wrap: break-word、word-break: break-all 或 min-width: 0(在 flex/grid 子项中)使用。