Html Question posted in
Some basic documentation can be found here.

Html – 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?

Tags:

2

Answers


  1. 0

    I’ve got a solution for you which required 2 basic changes

    1. Convert the SVG to a .svg image URL.
    2. Add a ::before to the anchor tag and add the SVG to its content

    Example:

    p {
  max-width: 140px;
}

a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.a::before {
  content: url('https://img.cdn4dd.com/s/media/photosV2/1954ba82-d91f-43a2-8838-767fd2ad386f-retina-large.svg');
  display: block;
  width: auto;
  height: auto;
}
    <p>
  This is some text that includes a link

  <a class="a" href="https://example.com">
    <span>
      &#40;example&#41;
    </span>
  </a>
</p>
    Login or Signup to reply.
  2. 0

    I don’t 100% understand what you are after.

    <nobr> can keep content together:

    p {
  width: 140px;
  background: #eee;
}
    <p>This is some text that includes a link 
  <nobr>(
    <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 example example example example 
    </nobr>
  </a>)</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search