<hr/> 标签应该根据文本动态增加大小答案

【问题标题】：<hr/> tag should increase size dynamically based on text<hr/> 标签应该根据文本动态增加大小
【发布时间】：2019-12-18 19:26:59
【问题描述】：

我有<hr/> 标签，应该根据下面的文本动态增加其大小到<hr/> 标签。

<div class="outer">
<hr class="line"/>
The above line should be match with this sentence.
</div>

请提出建议。

【问题讨论】：

【解决方案1】：

您可以通过将width: fit-content 添加到outer 类来实现。

.outer {
  width: fit-content;
}

<div class="outer">
<hr class="line"/>
The above line should be match with this sentence.
</div>

编辑：为了获得更好的浏览器支持，您可以改用display: table。

.outer {
  display: table;
}

<div class="outer">
<hr class="line"/>
The above line should be match with this sentence.
</div>

【讨论】：

【解决方案2】：

将inline-block添加到外部div

示例 1：

.outer {
  display: inline-block;
}

<div class="outer">
          <hr class="line"/>
          The above line should be with this sentence.
      </div>

示例 2：

.outer {
  display: inline-block;
}

<div class="outer">
          <hr class="line"/>
          short text
      </div>

【讨论】：