css - 文本和 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

将显示 block 添加到 svg 容器:

.svg {
  display: inline-block;
}