Remove space between spans on word wrap

Question

I have a text and an icon that I want to show together in a div. The icon should always be right next to the text. When there is not enough space for the text, the text should wrap automatically, but the icon should stay next to the text.

I have tried a few solutions but I always run into the problem that as soon as the text wraps, the span will be much wider than it's content, creating a gap between text and icon:

What I want to achieve:

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

Any idea how this can be solved? I need a HTML/CSS solution, I don't want to solve this with JS. I have tried a million things (CSS Grid, display: inline-block, all possible flex properties, ...) and different answers on SO, but nothing worked so far.

can you share what it should look like with this example (paint example if need be)? should the text be `Erforderliche Gesamtsumme` or should the text look like what it currently does and the img be right next to it? — depperm, Aug 11 '21 at 12:02
Does this answer your question? [How to place a text next to the picture?](https://stackoverflow.com/questions/9371669/how-to-place-a-text-next-to-the-picture) — amirify, Aug 11 '21 at 12:04
@magnattic I doubt you can not do this. That is only possible if you place the icon inline with the text. And the propery of HTML element is that it's container must be a rectangular and not any other shape. — Huy Phạm, Aug 11 '21 at 12:23

score 1 · Answer 1 · answered Aug 11 '21 at 12:08

1

You can control spacing by using padding, margin for the icon

span {
  width: min-content;
}

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

answered Aug 11 '21 at 12:08

Huy Phạm

888
9
24

https://jsfiddle.net/9g2yrkza/ – Temani Afif Aug 11 '21 at 12:15
1

On first try, that seems to work! Thank you :) – magnattic Aug 11 '21 at 12:16
The problem with this solution is that it will always wrap the text, even when the container gets larger. – magnattic Aug 11 '21 at 12:20
@magnattic this won't work, it works only for some very particular case. Check the jsfiddle link I added as comment to understand the issue – Temani Afif Aug 11 '21 at 12:35

score -1 · Answer 2 · edited Aug 11 '21 at 12:09

-1

For this, you will have to use the flex attribute in your spans: The larger the value, the more space it takes up.

<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 dir ;)

edited Aug 11 '21 at 12:09

depperm

10,606
4
43
67

answered Aug 11 '21 at 12:07

Sedolon

1
2

Thanks, this looks okay on first look but actually makes the span of the rocket larger than it's content. If I have a third span in there it will create a gap at the end then. :( – magnattic Aug 11 '21 at 12:14

score -3 · Answer 3 · answered Aug 11 '21 at 12:06

-3

-- white-space: nowrap; remove all empty space.

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

answered Aug 11 '21 at 12:06

Abu Raihan

1
2

This overflows the container width. I want the text to wrap if there is not enough space. – magnattic Aug 11 '21 at 12:07

Remove space between spans on word wrap

3 Answers3