Wrapping Titles and Phrases as a Whole

More and more practice with responsive web design has been introducing a plethora of nuances as I go along. One interesting thing I have run into has to do with¬†the way text wraps when testing at different viewport widths. For single words, we can use the attribute¬†word-wrap: break-word; to wrap them (particularly for longer words) as a whole to the next line. What if we have an entire phrase and we don’t its words to be split to different lines?

Consider the following inline list of movie titles:

Young Frankenstein, Madagascar, Back to the Future, The Last of the Mohicans, Star Wars, The Shawshank Redemption, Big, Gone With the Wind, Anchorman, Beaches, A Night at the Roxbury, Animal House, The Great Gatsby

I find that when the title of a movie breaks to the next line, it can be a little annoying to read. A very simple solution to guarantee that the whole title of each movie will not split into new lines (unless the viewport itself is too narrow to fit the whole title) is to wrap each title in a <span> tag using display: inline-block;. Here is the movie list updated so that each title wraps as a whole:

Young Frankenstein, Madagascar, Back to the Future, The Last of the Mohicans, Star Wars, The Shawshank Redemption, Big, Gone With the Wind, Anchorman, Beaches, A Night at the Roxbury, Animal House, The Great Gatsby

The titles are now a lot easier to read! I have wrapped each title in <span class="movie-title"> where the "movie-title" class has the attribute display: inline-block;. Adding this class to a dynamic application via a loop would be a breeze.

Leave a Reply

Your email address will not be published. Required fields are marked *