如何实现两行文本宽度一致？第二行自适应第一行宽度可行性问询

当然可以实现这个需求！下面是具体的思路和修改后的代码：

核心思路 #

1. 绑定容器宽度到第一行文本：让包裹文本的<p>元素宽度由第一行内容决定，而不是占满父容器的50%，这样第二行的容器宽度就和第一行文本宽度完全绑定。
2. 拉伸/收缩第二行文本：通过文本对齐属性，让第二行文本自动填充或收缩到第一行对应的宽度。

修改后的代码 #

CSS 部分 #

.hello { 
  width: 50%; 
  /* 可选：若需要让内容在父容器中居中，添加下面这行 */
  text-align: center;
} 
.hello p { 
  font-size: 40px; 
  color: blue; 
  width: fit-content; /* 关键：让p的宽度由第一行文本撑开 */
  margin: 0;
  display: inline-block; /* 配合父容器的text-align:center实现居中，也可单独用margin:0 auto */
} 
.hello p span { 
  font-size: 20px; 
  color: red; 
  display: block; 
  text-align: justify; /* 让文本自动拉伸/收缩匹配宽度 */
}
/* 伪元素用于触发单行文本的justify对齐（默认justify不处理最后一行） */
.hello p span::after {
  content: "";
  display: inline-block;
  width: 100%;
}

HTML 部分 #

<!-- 长文本示例 -->
<a class="hello" href="#">
  <p>WASHINGTON<span class="site-subtitle">cheap cars</span></p>
</a>

<!-- 短文本示例 -->
<a class="hello" href="#">
  <p>vegas<span class="site-subtitle">luxury rides</span></p>
</a>

效果说明 #

• 当第一行是长文本（如WASHINGTON）时，<p>的宽度会被第一行撑开，第二行的cheap cars会通过text-align: justify拉伸至与第一行相同的宽度。
• 当第一行是短文本（如vegas）时，<p>的宽度会收缩到短文本的宽度，第二行的luxury rides会自动适配这个宽度（若文本长度超过宽度会换行，短文本则会撑满宽度）。

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