CODEWITHSUNDEEP
html
L84
L84

Reputation: 984

HTML - non-breaking space between text and image

So I have a menu where each (multiline) item has an image rightarrow.png right after the last word of the menu item. The problem is sometimes this arrow goes into a newline by itself, and I want to stop that from happening. I tried

Blah blah&nbsp;<img src="rightarrow.png" />

but still in some cases it looks like

Blah blah
>

It's driving me crazy.

Upvotes: 17

Views: 10267

Answers (5)

ak0000
ak0000

Reputation: 167

The difficulty is that the NBSP seems to only "bind" to the following entity if the entity is text, and not an image element.

A solution I found if you know the size of the image is to add several NBSPs to the end of the text, and then place a negative margin on the following image, so that it occupies the space of the NBSPs. That way, the last word and the NBSPs constitute one unit that will wrap or not wrap all together, and if the icon is at a negative margin that is greater than the width of the NBSPs, then it will never get pushed to the next line before the last word of the previous text does.

Something like this should work:

<span>This is some text&nbsp;&nbsp;&nbsp;><img style="margin-left: -15px;">

Alternatively, you can add padding to the text and a negative margin:

<span style="padding-right: 15px;">This is some text</span><img style="margin-left: -15px;">

(This is based on this answer: https://stackoverflow.com/a/25857961/5899236)

Upvotes: 0

mcrider
mcrider

Reputation: 400

Add a position: absolute; rule to the image; It will be displayed as if its inline if you don't add left/right positioning to it.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

This is the method that works across browsing situations:

Blah <nobr>blah <img src="rightarrow.png" /></nobr>

The nobr tag never got to HTML specs, for some odd reason, but this does not prevent it from working. If you just have to comply with the specs, use clumsier CSS instead:

Blah <span style="white-space: nowrap">blah <img src="rightarrow.png" /></span>

Upvotes: 8

Vivek Dragon
Vivek Dragon

Reputation: 2248

Check this BIN. I made this after assuming this is what you need.

HTML

  <ul>
<li><p>Menu 1</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li>
<li><p>Menu 2</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li>
<li><p>Menu 3</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li>
<li><p>Menu 4</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li>
  </ul>

Css

ul{ list-style-type:none;}
ul li{ float:left; padding:10px; width:100px;}
img{ width:20px;height:20px; float:left;}
p{ float:left; margin:0px; }

Check here for more details

Upvotes: 1

user1726343
user1726343

Reputation:

Put all your text in an element, then put the image in another wrapper. Add white-space:nowrap to their parent.

Upvotes: 20

Related Questions