Search
 

go back home...

Breaking That Long Text with CSS3

Have you ever run into the problem where you have a long chuck of text that overflows outside the element your rendering it in? It usually occurs when a link is super long and the container is too small for it to fit into. Luckily, I finally found a CSS3 property that can fix this mess. It’s called word-wrap and is part of the Text module of the CSS3 Specs.

Possible Values

  1. normal: content will exceed boundaries of specified rendering box
  2. break-word: content will wrap to the next line when needed, and a word-break will also occur if needed.

All you have to do is added it to a selector and your set to go. I put a simple example below if you need to take a look.

A Simple Example

The Fiddle

CSS

.wrap {
    word-wrap: break-word;
}

HTML

<p>
    This is a long block of text with no word wrap applied to it.
    <a href="#">http://www.alexvernacchia.com/long-text_that-will_hopefully_wrap</a>
</p>
 
<p class="wrap">
    This is a long block of text with no word wrap applied to it.
    <a href="#">http://www.alexvernacchia.com/long-text_that-will_hopefully_wrap</a>
</p>

Browser Support

  • IE 5.5
  • Firefox 3.5
  • Opera
  • Safari
  • Chrome

So there you have it, pretty simple huh?

 

I am a life-long learner, adventure seeker, and front-end developer for @ExactTarget