Question

I have a system similar to BB code whereby text within two tags is converted into a link which when hovered over produces an line image.

The problem is that sometimes if the phrase is long the text wraps onto the next line. When this occur the image is displayed above the text on the preceeding line and doesn’t look right. Because of this I want to ensure that if the text is going to wrap, it instead breaks to a new line.

I’m happy with any CSS3 only solutions to this.

Thanks

Answer 1

give your a css display: inline-block. Inline block doesn’t allow breaking within the block and therefore moves to the next line.

a {
 display: inline-block;
}