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:
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:
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.