It's Movember. Movember is a yearly, world-wide fundraiser for research of men's health problems, such as prostate cancer and depression. Your donation will count, even if it's just $1. Click here to donate.
Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

Breaking Up Long Lines With No Spaces In Them

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

Long_line_with_no_spaces_in_it_and_this_line_just_overflows_out_of_the_box

Looking at the demo above you'll see what is probably your problem at the moment. The long line of text with no whitespace in it, does not wrap along the container, but instead overflows out of it and in IE6 we'll see the "Expanding Width Bug" in action. What to do?! Oh what to do?!?!

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, and even in IE6... but not in Opera, not even Opera 10 beta supports it. Let's take a look:

Long_line_with_no_spaces_in_it_and_this_line_just_overflows_out_of_the_box

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 <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:

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

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.

Comments

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my books: