How to join an image to text

I need a special symbol that is unavailable so I'm using an imag开发者_JS百科e 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?

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;
}

You might do best to make an image of the entire set of characters that make a "word". That way if it wraps, it stays together.

Try wrapping the word containing the image+text in a <pre> or a <span> tag