文本和 SVG 之间没有换行符

Question

我有一个短文本，后面是一个宽度有限的容器中的 SVG。预期的行为是，如果文本比容器宽度长，则文本会中断，但我希望它不会在文本和 svg 之间中断：

当前结果：

预期结果：

在文本中间（蓝色之前）添加一个<nobr>或一个<span>标签并在 SVG 之后关闭它不是一种选择，因为文本来自外部数据库并且无法编辑。

<span class="text">
    Jack Wolfskin Jacke Colorado Flex - Midnight Blue
</span>
<span class="svg">
    <svg>
    ....
    </svg>
</span>

Answer 1

您可以使用此标记防止换行。它不需要包含最后一个单词，因此您甚至可以在生成的内容中使用它。

JSX

<div>
  {children}
  <span className="tail">
      {'\u00a0'}
      <svg></svg>
  </span>
</div>

超文本标记语言

<div>
  {children}
  <span className="tail">
      {'\u00a0'}
      <svg></svg>
  </span>
</div>

CSS

<div>
  Lorem ipsum dolor sit<span class="tail">&nbsp;<svg></svg></span>
</div>

https://jsfiddle.net/radarfox/65h40jt7/

Answer 2

将显示块添加到 svg 容器：

.svg {
  display: inline-block;
}