rating rating rating rating rating rated by 2 please register or login to rate

HTML5 tags - wbr (word break) A cool addition...

Attention: open in a new window. PDFPrintE-mail

Lately I have been starting looking into HTML5 and the advancements that could be useful for me. I stumbled upon a new tag and was actually very excited. The tag is the

<wbr />
tag.

What this tag does (described best at the w3schools website) is to have suggestions for potential break points in a long word. Let's assume you have following word on your page "Pneumonoultramicroscopicsilicovolcanoconiosis" (if you do have this on your page please give me a call, I know of a good doctor you could use...). What happens if this is the last word on the line and doesn't fit? You will wind up with the word on the next line and a rather large empty white space... Or even worse, when having a narrow container it might (depending on the overflow settings) get cut off or get out of it's boundaries. With this new tag, you would enter it into the word at locations that might be suitable for a word break.

Pneumonoultra<wbr />microscopicsilico<wbr />volcanoconiosis

This would break the word at these places if there isn't enough space available, yet leave it alone if enough space is available...

Comments  

 
0 # ronfinnerty 2010-12-28 12:51
do you have to position the "in case this doesn't fit the line break here" tag or can you just flag the word to be broken whereever it fits best?
so...using your example.......Pneumon-
ulttramicrosopi csilicovolcanco niosis.
might result or Pneumonulttrami crosopi c-silicovolcancon iosis. might result.?
btw. i hate capchas.
Reply | Reply with quote | Quote
 
 
0 # easchkenasy 2010-12-28 22:21
you can position it wherever you'd like to have a potential line break. (I updated the demo code, since my html code got changed by the tinymce editor behind the scenes...)

PS: if you'd like to contribute, we would elevate you to an editor who doesn't have the CAPTHCA... uuuuh, enticing... :-)
Reply | Reply with quote | Quote
 

Design Image by beezlee