See also: • Computer Stuff • HTML underline & line-through • View JavaScript HTML output
HTML: Stop Line Break
How to get text in an html document to stay on one line!
Here are some other phrases that might have brought you to this page.
How to prevent a line break in html • Keep text together in html • Stop hyphen from wrapping to a new line • No line break in text • html stop line break • html stop text wrapping • html stop word wrap • html nowrap • html nobreak • html line break &nbsp • css stop text wrapping • css stop text wrap • css stop wrapping • css stop line break • css stop word wrap • css word wrap none • css nowrap • non breaking hyphen • stop hyphen breaking • stop hyphen word wrap • no break on hyphen • hyphen nowrap • nbhyphen • how to stop word wrap for one line of text

If you got here through some other means and feel that your search phrase might usefully find this page please let me know by emailing me from the contact page.

So how do you stop text wrapping on a web page?

Being a perfectionist (a much eroded perfectionist nowadays) I had a problem where I wanted to prevent this: "click here --> Toxic things" from wrapping on the web page between the "here" and the "Toxic things".  Obviously the non-breaking space springs to mind and the form "click here --> Toxic things" goes some way to solving the problem.  But the line would still break on the hyphens.  Is there the equivalent &nbhyphen;? I asked myself.  Well as it turns out there is not.  Both the – and the — will break and trying to use the maths minus symbol (−) doesn't work either.

So I checked out all the html tags to see if there was something there.  Well there used to be the <nobr> tag and there is the <pre> tag but both are unsatisfactory for different reasons.  The <nobr> is non standard and doesn't work in all browsers and the <pre> won't keep the current formatting.

Sometimes I give up on these things just because I have to, but I persevered and eventually I found the solution.

The solution is to use CSS.

create the style in the <head> section
.my-nowrap {white-space: nowrap;}
and then this in the <body> section:
click <span class="my-nowrap">here --> Toxic things</span>

You can also do it inline in the <body> like this:
click <span style="white-space:nowrap">here --> Toxic things</span>

The WC3 Markup Validation Service which check the markup (HTML, XHTML, …) of web documents marks pages containing "-->" (which should be "--&gt;") as correct.  According to html specifications this is not actually correct because the greater than sign is a reserved symbol in html.  But there you go - the world is less than perfect.

So I hope if you have been tearing your hair out trying to stop the line breaking in any situation that this page has provided you with a solution.  If so you might think to link to this web page or stick it on your social networking thingy or something to help the ranking of the page.  This way, the things that people want to find get found!  Lets keep the web the way we want it!

Made 20 May 2009
Toxic Drums Share

© Sente Limited 2009