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

Posted 2021-04-21

给定一个包含句子的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>

你怎么解决这个问题？

答案

尝试使用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>

另一答案

在一个范围内包装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>

另一答案

您可以将文本包装在<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>

另一答案

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

以上是关于如何在使用flexbox时在句子的中间添加？的主要内容，如果未能解决你的问题，请参考以下文章

Flex box 居中在桌面上有效，但在手机视图中却不太适用

如何在不让它在句子中间暂停的情况下覆盖屏幕阅读器对句子中单词的发音？

如何在句子中间搜索单词或短语？ [复制]

CSS：中间使用 flexbox 省略号，在 safari 中中断

Flexbox 嵌套元素

如何使用 VBA 将事件添加到运行时在 Excel 中创建的控件