Prevent long text from overflowing

Question

How do I break all words (inside the <pre>) that are too long that keep overflowing:

<pre>A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again. This makes it easier to see when one paragraph ends and another begins.</pre>

Does this answer your question? [How to word wrap text in HTML?](https://stackoverflow.com/questions/1147877/how-to-word-wrap-text-in-html) — mohammedkhan, Aug 06 '20 at 11:32

Christine Wanjiru · Accepted Answer · 2020-08-05T13:23:17.107

You can use word-wrap and white-space to achieve the desired results. Like this:

pre {
   white-space: pre-wrap;
    word-break: break-word;
}

<pre>A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again. This makes it easier to see when one paragraph ends and another begins.
</pre>

NOTE: I have used css on element that sets white-space to pre-wrap and word-break to break-word.

Prevent long text from overflowing

1 Answers1