css - 如何在使用 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>