HTML tip: Keeping some words together
November 7, 2008 · Chris Peters
Here's a little HTML trick. It involves keeping some of your words together, even if they span across more than one line. This is done by using non-breaking spaces.
As HTML knowledge is becoming more and more important for marketing, it would behoove you to know some of the ins and outs of writing HTML.
That said, here’s a little trick. It involves keeping some of your words together, even if they span across more than one line. This is done by using non-breaking spaces.
The secret code
To force a web browser to treat 2 separate words as if they were 1, use the code instead of a space, like so:
| These two words are like one. |
A practical example
At one point, I had a little widget on my blog that had my latest tweet. When I first added this functionality to the sidebar, I noticed a little boo-boo when the words “(via Twitter)” ended up spanning more than a single line.
Notice how “via” and “Twitter” span 2 lines. This makes it a tad less scannable. The 2 words belong together!
So I changed my code to read as such:
| (via <a href="http://twitter.com/liveeditorcms">Twitter</a>) |
Now the words will stay together, no matter where they end up on the line:
Another good use: your brand
Another good place to use the non-breaking space is in your brand. Keep all the words together so that it doesn’t end up all fragmented:
| Live Editor |
This is truly a nit, but paying attention to the small details often makes a big difference in your design and content.
