删除自动换行上的跨度之间的空格[重复]答案

【问题标题】：Remove space between spans on word wrap [duplicate]删除自动换行上的跨度之间的空格[重复]
【发布时间】：2021-10-14 21:23:13
【问题描述】：

我想在一个 div 中一起显示一个文本和一个图标。图标应始终位于文本旁边。当文本空间不足时，文本应自动换行，但图标应留在文本旁边。

我尝试了一些解决方案，但我总是遇到这样的问题，即一旦文本换行，跨度就会比它的内容宽得多，从而在文本和图标之间产生间隙：

我想要达到的目标：

<div style="width: 200px;">
  <div style="display: flex;">
      <span>Erforderliche Gesamtsumme</span>
      <span>????</span>
  </div>
</div>

知道如何解决这个问题吗？我需要一个 HTML/CSS 解决方案，我不想用 JS 解决这个问题。我已经尝试了一百万件事（CSS Grid、display: inline-block、所有可能的 flex 属性，...）和 SO 上的不同答案，但到目前为止没有任何效果。

【问题讨论】：

你能分享一下这个例子应该是什么样子（如果需要的话，画一个例子）？文本应该是Erforderliche Gesamtsu<newline>mme 还是应该看起来像它当前的样子并且img 就在它旁边？
这能回答你的问题吗？ How to place a text next to the picture?
我添加了想要的结果。
你不能这样做
@magnattic 我怀疑你不能这样做。仅当您将图标与文本内联时才有可能。而 HTML 元素的属性是它的容器必须是矩形，不能是其他任何形状。

标签： html css flexbox

【解决方案1】：

您可以使用padding、margin 控制图标间距

span {
  width: min-content;
}

<div style="width: 200px;">
  <div style="display: flex;">
      <span>Erforderliche Gesamtsumme</span>
      <span>?</span>
  </div>
</div>

【讨论】：

jsfiddle.net/9g2yrkza
第一次尝试，这似乎有效！谢谢你:)
这个解决方案的问题是它总是会换行，即使容器变大了。
@magnattic 这不起作用，它仅适用于某些非常特殊的情况。检查我作为评论添加的 jsfiddle 链接以了解问题

【解决方案2】：

为此，您必须在 span 中使用 flex 属性：值越大，占用的空间越多。

<div style="width: 200px;">
  <div style="display: flex;">
    <span style="flex:3;">Erforderliche Gesamtsumme</span>
      <span style="flex:2;">?</span>
  </div>
</div>

Hoffe das hilft 目录 ;)

【讨论】：

谢谢，这乍一看还不错，但实际上使火箭的跨度大于其内容。如果我在那里有第三个跨度，那么它会在最后产生一个间隙。 :(

【解决方案3】：

-- 空白：nowrap;删除所有空白空间。

<div style="width: 200px; white-space: nowrap;">
  <div style="display: flex;">
      <span>Erforderliche Gesamtsumme</span>
      <span>?</span>
  </div>
</div>

【讨论】：

这会溢出容器宽度。如果没有足够的空间，我希望文本换行。