17

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.

L84
  • 974
  • 2
  • 11
  • 21
  • add the full code you have done – user7282 Dec 11 '12 at 06:09
  • 1
    You might need to show more code, especially the CSS. A JSFiddle would be ideal. – greener Dec 11 '12 at 06:09
  • 2
    Seriously? Do I have to include the php error log just to be thorough? Come on, how do I ensure that there is never not in any circumstances a breaking space between an image and text in an element where there should be breaking spaces otherwise. – L84 Dec 11 '12 at 06:12

5 Answers5

21

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

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
  • 1
    Will there be breaking spaces between words? Because I only need to not be a breaking space between an image and the preceding word. – L84 Dec 11 '12 at 06:14
  • 1
    @L84 If you set a width on the text container, spaces will break to new lines. – Asad Saeeduddin Dec 11 '12 at 06:15
  • No, id doesn't break, it's all in one line - probably because white-space:nowrap is in effect – L84 Dec 11 '12 at 06:19
  • 3
    @L84 You need to reset the wrap property on the text container. See this example: http://jsfiddle.net/6Z4Xw/ – Asad Saeeduddin Dec 11 '12 at 06:21
  • Aaah yes, now it works, thanks. Never would've thought of that! – L84 Dec 11 '12 at 06:22
  • Addition: id didn't work for me (`span` with `span` + `svg` inside) until I set `display: inline-block` for nested elements – Dmitry Jun 05 '17 at 07:42
7

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>
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Good answer, but accepted is better for the case of using html templates (e.g. when text substitutes on rendering). Hope, you got my mind. – Dmitry Jun 05 '17 at 07:27
1

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

Vivek Dragon
  • 2,218
  • 4
  • 27
  • 48
1

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.

mcrider
  • 391
  • 3
  • 3
0

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)

ak0000
  • 137
  • 5