• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 2. Speech Bubbles > Corralling Long Text

Corralling Long Text

OK, I know I just said we were going to jazz up the comments’ appearance. But before we get into the actual speech bubble styles, let’s quickly take care of an old, frustrating text-formatting problem that can be solved with the simplest bit of CSS3 you can imagine.


Here’s a pleasant surprise: the word-wrap property works in IE, as far back as version 5.5! The property was actually created by Microsoft and later adopted by W3C.

It’s not uncommon for people to include URLs in comments and forum posts, and these URLs often overflow their containers due to their length (Figure 2.2). If the URLs have dashes (-) in them, all the major browsers can wrap the text of the URLs just fine. But Webkit-based browsers and IE will not wrap at the forward-slash (/) character, and none of the major browsers will wrap at underscores (_).

Figure 2.2. Long URLs often overflow their containers, especially if they contain underscores.

In CSS3, there’s finally an easy way to tell the browser to wrap text within words and stop it from overflowing. All you have to do is give the word-wrap property a value of break-word, and the browser will wrap text within a word if it has to in order to keep it from overflowing.

The Lowdown on the word-wrap Property

The word-wrap property is part of the Text module found at www.w3.org/TR/css3-text. It controls whether or not text is allowed to break within “words.” (The separate text-wrap property controls how lines break between words.) The word-wrap property can be set either to normal (the default) or break-word.

Other than breaking long URLs, you might want to use word-wrap for:

Table 2.1. word-wrap browser support
Yes, 5.5+Yes, 3.5+YesYesYes

In speech-bubble_start.html, find the blockquote rule in the CSS in the head of the page, and add the word-wrap property:

blockquote {
   margin: 0 0 0 112px;
   padding: 10px 15px 5px 15px;
   border-top: 1px solid #fff;
   background-color: #A6DADC;
   word-wrap: break-word;

Save the page and check it in a very narrow browser window. Ah, much better. The browser will still try to wrap first at normal break-points, but if it has to, it will now wrap the text at underscores or even within a word (Figure 2.3). Obviously, placing a break within a word is not ideal, but I think in this case it’s preferable to the text overflowing and will probably only occur on long URLs, not regular text.

Figure 2.3. The browser will now break text between any two characters.

Now that we’ve taken care of that little annoyance, let’s start making these comments look like speech bubbles!

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint