如何让段落宽度适配其最长文本行的长度？

我有一段会自动换行的文本，希望段落（橙色背景框）的宽度能和父容器/所在网格单元格内，适配后的最长文本行长度保持一致——比如下图中，段落宽度就和第四行的粉色最长行对齐：

而且最长行的位置会随着父容器/网格单元格尺寸变化、文本换行方式改变而变化，比如下面两种场景：

之前尝试把父容器设为网格，给段落加place-self: center（目的是让段落居中对齐），但没效果——段落还是会占满整个网格单元格的宽度，没有收缩到最长行的长度。

解决方案 #

只需要给段落添加以下CSS代码，就能实现需求：

p {
  width: fit-content; /* 让宽度收缩到内容最长行的长度 */
  place-self: center; /* 网格容器内居中，非网格容器可以替换为 margin: 0 auto */
}

原理说明：

• width: fit-content 会让元素宽度自动适配内容的最大宽度（即文本中最长行的长度），替代默认块级元素占满100%父容器宽度的行为。
• 配合place-self: center（网格布局场景）或margin: 0 auto（通用布局场景），可让收缩后的段落在父容器内居中对齐。
• 当父容器尺寸变化导致文本换行、最长行改变时，fit-content会自动重新计算宽度，始终适配最新的最长行长度。

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