如何在元素包装在空白区域时包含边界框？

Question

鉴于以下示例......

＆＃13;

＆＃13;

/* Custom reset */

html {
  margin: 20px 0;
}

body {
  margin: 0 50px;
}

h1 {
  margin: 0;
}

/* Problem code */

h1 {
  background-color: lightblue;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

h1::before,
h1::after {
  background-color: purple;
  content: "";
  display: inline-block;
  flex: 1 0 auto;
  height: 3px;
}

h1::before {
  margin-left: -50px;
}

h1::after {
  margin-right: -50px;
}

h1>span {
  background-color: lightpink;
  flex: 0 1 auto;
  padding: 0 20px;
}

＆＃13;

<h1>
  <span>Fooooooooooo & Baaaaaaaaaar</span>
</h1>

＆＃13;

＆＃13;

＆＃13;

当您运行代码段时，您会注意到一个带有包装文字的粉红色框（因为它不适合所有在一行中）和两侧的紫色线条，如下所示：

这就是文本没有包装的样子（这是好的，它是我想要的）：

在第一张图片中，文字和紫色线条之间的空间太大，我需要它只有20像素，就像第二张图片一样。

在其他＆＃34;单词＆＃34;中，我希望实现这一目标：

（模拟图像）

不言而喻，我需要使用它来处理动态内容（文本可以是任何内容，包含任意数量的单词，短或长）。如果文本适合，我还需要将文本放在一行中，否则需要多行，并且在紫色线和文本之间始终最多20px。

Answer 1

如果我正确理解了您的最终目标，您只需在width上设置固定的<span>即可。这将确保达到所需的保证金额度。在粉红色的盒子周围，它也适用于可变内容;如果在一行上显示太多内容，则只会创建更多行。由于新行也受到固定width的限制，因此粉色框仍将保留相同数量的边距＆＃39;：

＆＃13;

＆＃13;

/* Custom reset */

html {
  margin: 20px 0;
}

body {
  margin: 0 50px;
}

h1 {
  margin: 0;
}

div+div {
  margin-top: 20px;
}


/* Problem code */

h1 {
  background-color: lightblue;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

h1::before,
h1::after {
  background-color: purple;
  content: "";
  display: inline-block;
  flex: 1 0 auto;
  height: 3px;
}

h1::before {
  margin-left: -50px;
}

h1::after {
  margin-right: -50px;
}

h1>span {
  background-color: lightpink;
  flex: 0 1 auto;
  padding: 0 20px;
  width: 350px;
}

＆＃13;

<h1>
  <span>Fooooooooooo & Baaaaaaaaaar</span>
</h1>

＆＃13;

＆＃13;

＆＃13;

显然，固定width所需的值取决于上下文，但350px适用于您的示例。