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

将display-block添加到svg容器：

.svg {
  display: inline-block;
}

Answer 2

我发现的唯一解决方案需要对原始HTML进行讨厌的更改。

为确保图标在新行中永远不会孤单，我使用white-space: no-wrap;将最后一个单词和该图标包装在一个新元素中，此外，如果我们希望如果该行不能容纳最后一个单词，则仍将其拆分，图标，我们可以使这个新容器内联flex和flex-wrappable。

<div>
  Lorem ipsum dolor sit
  <span class="last_word">
      very_long_last_word
      <svg>...</svg>
  </span>
</div>

.last_word {
  /* Stick icon to last word */
  white-space: no-wrap;  
  
  /* Make sure last word and icon will break ultimately */
  display: inline-flex;
  flex-wrap: wrap; 
}

实时示例：https://jsfiddle.net/uerzo6sa/

Answer 3

您可以在SVG上定义position: absolute，auto，top等用right。

https://codepen.io/jsit/pen/xxOQoVW

唯一的副作用是，这将使SVG出现在包含框的外面；从某种意义上讲，这是它全部起作用的原因。