- The Base Page
- Corralling Long Text
- Graphic Effects Sans Graphics
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
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.
Table 2.1. word-wrap browser support
|
IE |
Firefox |
Opera |
Safari |
Chrome |
|
Yes, 5.5+ |
Yes, 3.5+ |
Yes |
Yes |
Yes |
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!