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

Html – Is it possible to have the final line of wrapped text behave like an inline-block element?

I have a headline followed by an icon, arranged on the same line like so:

<div class="outer-container">
 <h1 class="article-header">Sample Short Headline</h1>
 <object class="link-svg" type="image/svg+xml" data="./resources/link.svg" width="30px" height="30px"></object>
</div>

enter image description here

I set both elements as inline block elements, which is how I get them to stay on the same line. If the headline is longer than one line, then the multiple lines of text take up the whole horizontal width, regardless of whether the text is inline-block.

This creates the unwanted behavior of the icon being pushed to the line below, even if there is plenty of available space on the last line of wrapped text:

enter image description here

Ideally, I would like the wrapped text to behave as if each word is an inline-block element, so that the link wraps along with the text like so:

enter image description here

Now I could literally do that, placing each word in it’s own inline-block container so that is behaves this way, but that feels very hacky, and would have to be done manually for headlines of different lengths.

This seems like a simple feature, and I imagine there is a better solution involving some types of wrapping attributes. Is there a simple way to do this?

Tags:

2

Answers


  1. 0

    Wrap the last word and image in a <span> and set white-space: nowrap;:

    .article-header span {
  white-space: nowrap;
}
    <h1 class="article-header">
  Sample Short Sample Short Sample
  <span>
    Headline
    <svg width="20" height="20" viewBox="0 0 20 20">
      <line x1="0" y1="10" x2="20" y2="10" stroke="currentColor"/>
      <line x1="10" y1="0" x2="10" y2="20" stroke="currentColor"/>
    </svg>
  </span>
</h1>
    Login or Signup to reply.
  2. 0

    You can just add display: inline; to your heading text h1 element, and the icon will stick to the last word.
    Here’s an example:

    h1 {
  display: inline;
}
    <div class="outer-container">
 <h1 class="article-header">Sample Long Headline to See How it will behave with multiple lines</h1>
 <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search