No line break between text and SVG

Question

I have a short text that is followed by an SVG in a limited-width container. The expected behaviour is that the text breaks if it's longer than the container width BUT I would like it NOT to break right between the text and the svg:

Current result:

Expected result:
enter image description here

Adding a <nobr> or a <span>tag in the middle of the text (before blue) and closing it after the SVG is not an option as the text comes from an external database and cannot be edited.

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

score 4 · Answer 1 · answered Aug 31 '20 at 15:39

The only solution I found required a nasty change in the origin HTML.

To make sure the icon is never alone in the new line I wrapped the last word and the icon in a new element with white-space: no-wrap;, plus if we want it to still split if the line cannot accommodate last word with the icon we can make this new container inline flex and 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; 
}

Live example: https://jsfiddle.net/uerzo6sa/

score 3 · Answer 2 · answered Oct 19 '17 at 16:07

3

add display-block to svg container:

.svg {
  display: inline-block;
}

answered Oct 19 '17 at 16:07

Sergey Sklyar

1,902
1
15
27

1

That's not the issue, the svg is already next to the text. The problem is when the text is long enough to push it to the next line – Aiwatko Oct 20 '17 at 07:49
2

1. You can put .text and .svg into container and apply `white-space: nowrap` to it. – Sergey Sklyar Oct 20 '17 at 09:21
2. Put the non-breaking space between .text and .svg: ` ` – Sergey Sklyar Oct 20 '17 at 09:23
3

nbsp doesn't work between the text and an svg element for some reason, and the nowrap option will only suffice in single-line instances (seems fine for op). **Edit:** wrapping the last part of the text and svg in a with nowrap works great. – aaaaaa May 09 '18 at 22:15
NBSPs and a negative margin for the svg seems to work, see my answer – ak0000 Jan 16 '23 at 22:54

radarfox · Answer 3 · 2023-08-26T10:27:58.200

3

You can prevent the line breaking with this markup. It doesn't need to include the last word, so you can use it even with a generated content.

JSX

<div>
  {children}
  <span className="tail">
      {'\u00a0'}
      <svg></svg>
  </span>
</div>

HTML

<div>
  Lorem ipsum dolor sit<span class="tail">&nbsp;<svg></svg></span>
</div>

CSS

.tail {
  white-space: nowrap;  
}

https://jsfiddle.net/radarfox/65h40jt7/

edited Aug 26 '23 at 10:27

answered Jan 10 '23 at 13:42

radarfox

51
6

Nice solution. Need to trim white spaces by the end of generated content, though it's not that painful. It helped me to add zero-width non-breaking spaces (U+FEFF) each side of – Champignac Apr 08 '23 at 17:55

score 0 · Answer 4 · answered Jan 16 '23 at 23:14

You can add padding to the text and a negative margin:

<span class="text" style="padding-right: 15px;">
    Jack Wolfskin Jacke Colorado Flex - Midnight Blue
</span>
<span class="svg" style="margin-left: -15px;">
    <svg>
    ....
    </svg>
</span>

That way, if there isn't room for the padding, the last word will get pushed to the next line also.

(This is based on this answer: https://stackoverflow.com/a/25857961/5899236)

score 0 · Answer 5 · answered May 09 '23 at 17:25

I combined solutions from the answers above to create this CSS class. It uses a zero-width space instead of a non-breaking one, which is added using CSS. As a result, the HTML looks cleaner and more predictable, without visible extra space.

CSS

.tail-icon {
  white-space: nowrap;
}
.tail-icon::before {
  content: "\200B";
}

HTML

<div>
  Lorem ipsum dolor sit<span class="tail-icon"><svg></svg></span>
</div>

score -1 · Answer 6 · answered Nov 11 '20 at 17:07

You can define position: absolute on the SVG, with auto for top, right, etc.

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

The only side-effect is this will allow the SVG to appear outside of the containing box; this is in a sense the reason it works at all.

No line break between text and SVG

6 Answers6

JSX

HTML

CSS

CSS

HTML