带有文本的元素如何缩小到最小尺寸

Question

您将看到一个包含 3 个弹性项目的弹性容器。如何让中间框根据文本所需的宽度缩小到最小尺寸？我想在标题的左侧和右侧添加两个装饰破折号，它们应该尽可能靠近想象的文本框两侧，这样就没有空格（红色）。不过，我希望当我缩小页面时文本会被破坏......

Answer 1

您可以使用

width: min-content;

来计算内容的最小宽度（对于文本，它将是最长的单词）

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

工作示例如下：

#shrink{
  width: min-content;
}

<div id="normal">this is a normal text</div>
<hr>
<div id="shrink">this text will shrink to its minimum size</div>