Tutorial

Preventing Line Breaks Using CSS

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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

0 Comments

Creative Commons License