文本和 SVG 之间没有换行符答案

【问题标题】：No line break between text and SVG文本和 SVG 之间没有换行符
【发布时间】：2023-04-02 12:20:01
【问题描述】：

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

当前结果：

预期结果：

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

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

【问题讨论】：

标签： css html svg

【解决方案1】：

将显示块添加到 svg 容器：

.svg {
  display: inline-block;
}

【讨论】：

这不是问题，svg 已经在文本旁边。问题是当文本足够长以将其推送到下一行时
1.您可以将 .text 和 .svg 放入容器并对其应用white-space: nowrap。
2.在 .text 和 .svg 之间放置不间断空格：&nbsp;
nbsp 出于某种原因在文本和 svg 元素之间不起作用，并且 nowrap 选项仅在单行实例中就足够了（对于 op 来说似乎很好）。 编辑： 使用 nowrap 将文本和 svg 的最后一部分包裹在中效果很好。

【解决方案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/

【讨论】：

【解决方案3】：

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

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

唯一的副作用是这将允许 SVG 出现在包含框之外；从某种意义上说，这就是它起作用的原因。

【讨论】：