如何在使用flexbox时在句子的中间添加？

Question

给定一个包含句子的flex容器，我想用<span>包装其中一个单词以获得一些额外的样式。例：

div {
  display: flex;
  border: 1px solid black;
  width: 190px;
  flex-wrap: wrap;
}

span {
  color: red;
}

<div>
  This is <span>not</span> a very long sentence.
</div>

正如你所看到的那样，<span>之后的句子就会破裂。

期望的结果是：

div {
  display: flex;
  border: 1px solid black;
  width: 190px;
  flex-wrap: wrap;
  white-space: pre;
}

.red {
  color: red;
}

<div>
  <span>This </span>
  <span>is </span>
  <span class="red">not </span>
  <span>a </span>
  <span>very </span>
  <span>long </span>
  <span>sentence.</span>
</div>

你怎么解决这个问题？

Answer 1

尝试使用display: inline-block;

div {
  display: inline-block;
  border: 1px solid black;
  width: 190px;
  flex-wrap: wrap;
}

span {
  color: red;
}

<div>
  This is <span>not</span> a very long sentence.
</div>

Answer 2

在一个范围内包装flexbox div的内容

div {
  display: flex;
  border: 1px solid black;
  width: 190px;
}

span#inner {
  color: red;
}

<div>
  <span>This is <span id="inner">not</span> a very long sentence</span>
</div>

Answer 3

您可以将文本包装在<p>中，以便span继承段落的属性，除了它是在语义上处理HTML的正确方法。如果我错了，请纠正我，但它增加了它的可访问性。

div {
  display: flex;
  border: 1px solid black;
  width: 190px;
  flex-wrap: wrap;
}

span {
  color: red;
}

<div>
  <p>This is <span>not</span> a very long sentence.</p>
</div>

选项2：不要将div包裹在flex中。使用inline-block

div {
  display: inline-block;
  border: 1px solid black;
  width: 190px;
  flex-wrap: wrap;
}

span {
  color: red;
}

<div>
  <p>This is <span>not</span> a very long sentence.</p>
</div>

Answer 4

让div做它自然做的事情，所以只需定义一个width和所需的border。

没有理由给div任何display财产，尤其不是display: flex。

div {
  border: 1px solid black;
  width: 190px;
}

span {
  color: red;
}

<div>
  This is <span>not</span> a very long sentence.
</div>