CSS如何移除文本换行时div元素右侧的多余空白

给展示文本的块级div设置max-width后，文本自动换行时元素会始终撑满max-width设定的宽度，导致短行右侧出现多余空白，复现代码如下：

<div class="parent">
  <span>aaa aaa aa aaa aaaaaaaaaaaaa</span>
</div>

.parent {
  background-color: red;
  max-width: 160px
}

块级元素默认宽度会占满可用空间，不会随换行后文本的实际最长行宽度收缩，给.parent添加以下属性即可修复问题：

.parent {
  background-color: red;
  max-width: 160px;
  /* 宽度贴合内容，同时受max-width限制不会超宽 */
  width: fit-content;
  /* 可选：无空格长串自动断行，避免内容溢出容器 */
  overflow-wrap: break-word;
}

属性说明：

• width: fit-content：让元素宽度跟随实际内容宽度变化，同时遵守max-width约束。如果换行后最长的文本行长度小于max-width，元素会自动收缩宽度到和最长文本行一致，直接消除右侧多余空白；如果存在长度超过max-width的长文本/长单词，元素宽度会固定为max-width值。
• overflow-wrap: break-word：针对无空格的长串内容做断行处理，保证长串到达max-width边界时自动换行，不会撑破容器。

如果需要兼容不支持fit-content的老旧浏览器，可以将该属性替换为display: inline-block，实现同等的宽度自适应效果。注意行内块元素默认不会独占一行，如果需要元素单独占一行，给父容器加对应块级布局约束即可。

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