How do I make a text go onto the next line if it overflows?

Css Problem Overview

I tried word-wrap: break-word;, but it separates lines mid word.

In order to use word-wrap: break-word, you need to set a width (in px). For example:

div {
    width: 250px;
    word-wrap: break-word;
}

word-wrap is a CSS3 property, but it should work in all browsers, including IE 5.5-9.

As long as you specify a width on the element, it should wrap itself without needing anything else.

word-wrap: break-word;

add this to your container that should do the trick

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content Type	Original Author	Original Content on Stackoverflow
Question	user784756	View Question on Stackoverflow
Solution 1 - Css	Serina Patterson	View Answer on Stackoverflow
Solution 2 - Css	Tieson T.	View Answer on Stackoverflow
Solution 3 - Css	Damathryx	View Answer on Stackoverflow

Content Type

Original Author

Original Content on Stackoverflow

Question

Solution 1 - Css

Solution 2 - Css