Question

I need a special symbol that is unavailable so I’m using an image the same size as the text in its place. The problem is, when I reach the end of a line, it draws the image and wraps the text to the next line which looks wrong.
I can’t force a line break becuase it would then look wrong on screens with different resolutions. Is there a way to join the text to the image so that if it needs to wrap, it will wrap the image along with the text?

Answer 1

Wrap the word in a <span> tag, and use white-space:nowrap; on the span.

<p>This is text with a
    <span class="word">wor<img src="symbol.gif">d</span>
    with a symbol in it.
</p>

CSS

.word {
    white-space:nowrap;
}