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:

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>

Answer 1

add display-block to svg container:

.svg {
  display: inline-block;
}

Answer 2

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/