Preventing Line Breaks Using CSS

Sometimes you'll want to have short blocks of text always stay on the same line. It's easy to prevent line breaks for specific elements using the CSS white-space property:

span.nobreak {
  white-space: nowrap;
}

And you can improve upon that in some occasions by hiding any text that would overflow and adding an ellipsis:

span.nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Another way to prevent a line break for just a one-off string of text would be to use non-breaking spaces ( ) straight in your HTML. Here’s an example using When The Levee Breaks:

When nbsp;The nbsp;Levee nbsp;Breaks
✖ Clear

πŸ•΅ Search Results

πŸ”Ž Searching...