How can I prevent a line break at an SVG icon?

In an HTML document, suppose I have something like a link that starts after another non-whitespace character, e.g.

p {
  max-width: 140px;
}

<p>This is some text that includes a link (<a href="https://example.com">example</a>)</p>

If the viewport width is such that the line has to break in the middle of the first word of the link text, then the preceding character (the opening parenthesis, in this case) "sticks" to the link, i.e. the standard layout algorithm breaks the line at the closest preceding whitespace.

However, if I want to insert an SVG icon at the start of the a element:

p {
  max-width: 140px;
}

<p>This is some text that includes a link (<a href="https://example.com"><svg style="height: 1em; color: green;" viewbox="0 0 10 10" fill="currentColor"><circle cx="5" cy="5" r="5" /></svg>example</a>)</p>

Then the line is now allowed to break either side of the SVG.

Question

Is there any way to make the layout engine treat the svg the same as it would normal text characters, so that the open parenthesis still "sticks" to the link text?

I can't make the whole paragraph or the whole link white-space: nowrap - I want the text to be able to wrap normally both within and outside the link, I just need it not to break around the <svg> (unless the link as a whole is preceded by whitespace). Basically I want to be able to insert an icon at the start of the link without interfering with the normal text layout behaviour, as if the icon were just another character with all the same Unicode properties as the first character of the existing link text.

Is this possible?

Solution

You could try to simulate characters for your SVG using pure CSS (the ::first-letter pseudo-element can be an option).

But I think you won't achieve the exact behavior of a standard character.

Tanishq's response works, but for example, if the parenthesis were before the image as it was in your initial example, not after, the parenthesis and the image would be separated onto different lines.

If you truly want character-like behavior, personally, I would turn to a Dingbat typography.

You can certainly create your own Dingbat typography to embed a set of SVG icons and use them as you wish in the characters flow (it's the same principle as Google Material Icon).

For example, Fontello website allows you to create your own typography in a few clicks.