How to use CSS word-break to Responsively Break Overflowing Text Strings

Now that responsive design is such an integral part of web development, there are certain issues that often arise. On mobile devices a very common occurrence is when text strings are too long to fit inside the container element thus overflowing it. While there are many different situations where this issue can happen, we often see it while displaying URLs because they are typically longer text strings that do not contain natural breaks. Luckily this issue is very easily corrected simply by using the CSS word-break property. In this tutorial we will teach you how to easily break overflowing text strings responsively using the CSS word-break property.

Step 1: Create an HTML element for your text

In Step 1, we will be creating an HTML element to place our text inside. For purposes of this tutorial we are utilizing a span tag, but please note you can utilize any HTML element you want for this method.

HTML

<span class="word_break">Loremipsumdolorsitametchoroinsolensconceptamvimcu</span>

Items to Note:

  • Take note of the CSS class ‘word_break added to the HTML element, it will be referenced in the next and final step.
  • Any HTML element can be used.

Step 2: Use the CSS word-break property to break your overflowing text responsively

In the final step we will utilize CSS to make our span tag responsive while at the same time breaking any text strings that are too long and overflow the container element.

CSS

.word_break{
display: block;
max-width: 220px;
-ms-word-break: break-all; 
word-break: break-all; 
word-break: break-word;
}

Items to Note:

  • Make sure that you are referencing the same CSS class placed on your HTML element.
  • Max-width can be adjusted to any width necessary or removed if the element is already inside of another responsive element.
  • The 3 different word-break CSS properties ensure that it is cross browser compatible.

Full Code

HTML

<span class="word_break">Loremipsumdolorsitametchoroinsolensconceptamvimcu</span>

CSS

.word_break{
display: block;
max-width: 220px;
-ms-word-break: break-all; 
word-break: break-all; 
word-break: break-word;
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.