hasLayout.net

Description

A short tutorial explaining how to break up those long lines with no spaces that just don't seem to want to wrap

Date of the Tutorial

Wed Aug 26 18:17:22 2009

Overview

Ok, OK!!! I know that someone with a tad of experience may be wondering how something this simple and semi-rare could grant a tutorial? Thing is, [at the time of this writing] CSS3 is still on the way, so a lot of people may not be familiar with all the goodness that it offers as well as some people wonder about solutions for browsers that do not yet support word-wrap property. In this short tutorial, I'll cover both and rid myself of having to repeat the same info over and over again on the IRC channel I frequent.

The Problem

Simple Solution: word-wrap Property

CSS3 [still being developed at the time of this writing] offers us a nice and easy, painless solution. It is supported Firefox 3.5 (not 3), Safari 4 [probably in earlier versions as well], Chrome ... but not in Opera, not even Opera 10 beta supports it. Let's take a look:

HTML Code:

<p>Long_line_with_no_spaces_in_it_and_this_line_just_overflows_out_of_the_box</p>

CSS Code:

p {
    width: 10em;
    word-wrap: break-word;
}

All I added was the word-wrap property set to value break-word on our ' element"><p> and problem is solved. How awesome is that?

Hacking For Everything

In case you wish to deploy a solution that would work in "more" browsers, you may consider this dirty trick:

HTML Code:

<p>L o n g _ l i n e _ w i t h _ n o _ s p a c e s _ i n _ i t _ a n d
_ t h i s _ l i n e _ j u s t _ o v e r f l o w s _ o u t _ o f _ t h e _ b o x</p>

CSS Code:

p {
    width: 10em;
    word-spacing: -0.3em;
}

Yes, you're seeing the code correctly, I've added a space after every character in my string. This is obviously not a bandwidth saving solution if you're planning to apply this fix on a huge chunk of text, but it works; and if you have just a tiny string that may overflow depending on user's font size, it's just fine to use this trick.

Since adding a space after every character would make our text rather "spacy", I am also setting word-spacing property to value -0.3em (note the negative) to compensate for that. The value is just a magic number that seems to look right; play around with it.