How can I prevent a linebreak after IMG?

Forum Moderators: not2easy

Message Too Old, No Replies

How can I prevent a linebreak after IMG?

Suppress automatic optional linebreak after images

knnknn

7:56 pm on Aug 25, 2010 (gmt 0)

I have the following code

<img src=""><a href="">abc def</a>

How can I prevent a linebreak between the <img>-tag and the <a>-tag?
Not even a   between the tags works.

It's not an enforced linebreak (like after block elements) but the line break occurs when the browser window is too small.

I don't want to prevent any linebreaks between "abc" and "def", just between <img> and <a>.

I don't want to use <nobr> because it's nonstandard and would be dirty:

<nobr><img src=""><a href="">a</nobr>bc def</a>

Any ideas are highly appreciated!

Hoople

3:39 am on Aug 26, 2010 (gmt 0)

Wrap the image and <A> tag in a div and float it. On that div set white-space:nowrap;

The div will flush to the parent container and other content will flow around it. How things wrap can be configured at that div level. See [w3.org ]

<div style="white-space:nowrap;"><img src=""><a href="">abc def</a></div>

I created a page consisting of a paragraph of Lorem Ipsum, a 126px by 106px graphic and the code snippet above. I floated it right and placed it above the Lorem Ipsum text.

Tested fine as browser was compressed horizontally - graphic scrolled left off screen but no break with <A> text (Firefox 3.6.8 on Ubuntu Linux). YMMV

knnknn

7:50 am on Aug 26, 2010 (gmt 0)

Sorry, Hoople, doesn't work because the nowrap makes the <a>-white spaces nowrap, too, but you gave me the right thought for the solution!

<span style="white-space:nowrap">
<img src="" />
<a href="" style="white-space:normal">abc def</a>
</span>

Thanks!

You need an outer element (e.g. <span> with "nowrap") and inner element (e.g. <a> with normal wrap)

tangor

8:46 am on Aug 26, 2010 (gmt 0)

What's wrong with not using display, block, or inline?

milosevic

12:06 pm on Aug 26, 2010 (gmt 0)

Tangor, presuming you didn't mean to write "not" in that, it wouldn't work for this purpose. block/inline is forced linebreaks before and after (or not), this is something that breaks only if the browser window is small (ie, the elements are already displayed inline)

Hoople

1:37 am on Aug 27, 2010 (gmt 0)

Great knnknn that it helped towards your solution. That'll teach me to attempt deep thought past 10pm, LOL!