将右对齐<p>宽度截断为文本实际宽度并对齐标题

核心思路 #

• 移除<p>的固定宽度，使用width: fit-content让元素宽度自适应文本换行后的最小必要宽度（即内容最长行的宽度）
• 给父容器<div>添加align-items: flex-start，避免子元素被拉伸至容器满宽，确保<h4>与<p>的左边缘自然对齐
• 保留<p>的text-align: right属性实现文本右对齐

修改后的代码 #

HTML（无需改动）

<div>
  <h4>
    PLEASE LINE ME UP
  </h4>
  <p>
    This is some example
  </p>
</div>

CSS

p {
  width: fit-content; /* 自适应内容最长行宽度 */
  text-align: right;
  margin: 0; /* 可选：移除默认边距避免排版偏差 */
}

div {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 子元素靠左对齐 */
}

效果说明 #

• <p>的宽度会根据文本内容自动调整为刚好容纳最长一行的宽度，完全符合文本换行规则，无需硬编码数值
• <h4>会自动与<p>的左边缘对齐，无论文本内容如何变化都能保持对齐效果
• 适配任意长度的文本内容，包括多行文本场景

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