Text not wrapping in p tag

Solution 1:

Give this style to the <p> tag.

p {
    word-break: break-all;
    white-space: normal;
}

Solution 2:

Word wrapping only occurs when there is a word break.

If you have a "word" that is as long as that, then there is no place for it to break.

The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).

Alternatively, you can use the word-break CSS property to tell the browser to line break in the middle of words.

p { word-break: break-all }

(Note browser support).

Alternatively, you can use overflow to truncate the text if it won't fit in the container.

Solution 3:

To anyone still struggling, be sure to check and see if you've set a line-height value on the font in question: it could be overriding the word wrap.