HTML text and image line folding

Question

Hello. I have the html page where textual article title is followed by an image. When the title is big enough some part of it goes to newline together with the image. But sometimes the textual title fits the page, but only without image, so the image goes to newline. How to glue the image with the last word of the title, so that image will go to the new line only with the part of text?

The current HTML markup:

 <div class="title">
<a href="link to the article">Article title goes here...</a><img src="/pics/.gif"/>

Answer 1

Adding a non-breaking space between the img and the anchor tag should keep the browser from splitting them on separate lines. That will glue the image to the whole link, however.

To get the image glued to only the last work of the link, you can either take the last word out of the link, or put the image in, and then the same non-breaking space between the last word and the image will give you the layout you want.