Posted on August 16th, 2009 5 comments
The <wbr /> tag (word break), little-known but very useful, tells the browser “insert a word break here if you wish”. Consider for example that you have a long text (ie a URL or alphabet letters) to put in a zone which width cannot be extended. So we have the following code :
width : 50px;
overflow : hidden;
border : 1px solid red;
Now using <wbr /> :
abc<wbr />def<wbr />ghi<wbr />jkl<wbr />mno<wbr />pqr<wbr />stu<wbr />vwx<wbr />yz
Emphasize is put here on the amount of inserted <wbr /> tags (every three letters actually) to illustrate the browser behaviour, which decides when to effectively insert a word-break, in opposition to the <br /> tag, which always inserts one.
This tag is not XHTML valid (maybe the reason why you won’t find it in the Visual Studio intellisense) but widely implemented by browsers anyway. Results shown here are not screenshots but direct interpretation of the tag, so you get immediately an idea if your browser supports it. For more information about its support, you can take a look at the compatibility table. So, in some cases, instead of using ugly CSS hacks, rather use <wbr /> and you’re done !
Posted on May 1st, 2009 2 comments
After looking at how to write a clean CSS, now let’s see how to write beautiful HTML. Click on the picture to zoom.
Source : CSS Tricks