Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • The little-known <wbr /> tag

    Posted on August 16th, 2009 Thibaut 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 :

    XHTML :

    <div class="fixedWidth">

        abcdefghijklmnopqrstuvwxyz

    </div>

    CSS :

    div.fixedWidth

    {

        width : 50px;

        overflow : hidden;

        border : 1px solid red;

    }

    Result :

    abcdefghijklmnopqrstuvwxyz

    Now using <wbr /> :

    <div class="fixedWidth">

        abc<wbr />def<wbr />ghi<wbr />jkl<wbr />mno<wbr />pqr<wbr />stu<wbr />vwx<wbr />yz

    </div>

    Result :

    abcdefghijklmnopqrstuvwxyz

    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 !

    Share/Save/Bookmark

  • What beautiful HTML looks like

    Posted on May 1st, 2009 Thibaut 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

    Share/Save/Bookmark