Corralling Long Text CSS3

OK, we know we 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 . If the URLs have dashes (-) in them, all the major browsers can wrap the text of the URLs just fine. But Webkitbased browsers and IE will not wrap at the forward-slash (/) character, and none of the major browsers will wrap at underscores (_).

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

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.

word-wrap browser support

word-wrap browser support

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 breakpoints, but if it has to, it will now wrap the text at underscores or even within a word . Obviously, placing a break within a word is not ideal, but we think in this case it’s preferable to the text overflowing and will probably only occur on long URLs, not regular text.

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

The browser will now break text between any two characters.

The browser will now break text between any two characters.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics