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;
↓ Here's a great React course we recommend. Plus, this affiliate banner helps support the site πŸ™

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
  Tweet It

πŸ•΅ Search Results

πŸ”Ž Searching...

Sponsored by #native_company# β€” Learn More
#native_title# #native_desc#