如何让自动换行的CSS元素宽度适配文本最长行宽度？

不用JS，纯CSS就能搞定这个问题。

问题根源在于inline-block的宽度计算逻辑：当你给它设置max-width后，一旦文本因这个限制换行，元素宽度会直接取max-width的数值——哪怕实际最长文本行的宽度比这个值小，所以右侧会出现空白。

试试下面两种方案：

方案1：使用display: table #

span {
  max-width: 150px;
  display: table;
  background: yellow;
}

table元素的宽度会自动适配换行后的最长文本行，同时不会突破max-width的限制，完美贴合你要的效果。如果需要让元素保持inline特性（比如和其他文本在同一行），换成display: inline-table即可。

方案2：结合fit-content #

span {
  max-width: 150px;
  width: fit-content;
  display: inline-block;
  background: yellow;
}

fit-content会让元素宽度取「内容实际需要的宽度」和max-width中的较小值，当文本换行时，它会自动匹配最长行的宽度，而非直接占满max-width。2023年主流浏览器都已支持这个属性。

内容的提问来源于stack exchange，提问作者Codemonkey