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

Question

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

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

建议。

Answer 1

将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>

Answer 2

您可以通过将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>