CODEWITHSUNDEEP
htmlcss
Autumn Leonard
Autumn Leonard

Reputation: 511

How to force element to stay on the same line as last word previous element?

This is similar to How can I force two elements to always stay on the same line in a <td>, but I would like the element only to line up with the -last word- of the previous element.

Example

<th>
  {dynamic text}
  <i>{static icon}</i>
</th>

Given sufficient room, we would get:

dynamic text here{icon}

If there isn't enough room, it would wrap:

dynamic text
here{icon}

But it should never put the {icon} on it's own line like this:

some text
here
{icon}

I would like the static icon to stick to the last word of the dynamic text.

Upvotes: 2

Views: 2013

Answers (2)

Ao Li
Ao Li

Reputation: 71

I think set display: inline is better, consider it's asking stick to last word instead of whole line, and it's wrappable.

Upvotes: -1

Thomas Bormans
Thomas Bormans

Reputation: 5354

You should use nowrap. Here are the docs. nowrap let's you keep several words on a single line without braking.

Take a look at this codepen.

CSS:

.nowrap {
  white-space: nowrap;
}

HTML:

Some <span class="nowrap">text with</span> extra text.

Upvotes: 1

Related Questions