[Edit]

Break long text and move it to the next line in html

1 contributors

2 contributions

0 discussions

8 points

Created by:

Kenya-Spears

860

Problem

Edit

I have long text word in div and I'd like to break it into couple
of lines instead of going out of the border.
Screenshot with this problem:

Code with this problem:

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
    <div style="width: 150px; border: 1px solid black;">
        <div>Initially only implemented client-side in web browsers,
            JavaScriptJavaScriptJavaScriptJavaScriptJavaScript engines</div>
    </div>
</body>
</html>

Auto running

This text:

xxxxxxxxxx
 
JavaScriptJavaScriptJavaScriptJavaScriptJavaScript

will go outside of the 150px box.
How to fix it?

Solution

Edit

xxxxxxxxxx
 
overflow-wrap: break-word;

Just add this 1 line and it fixes the problem.
Yours fixed example:

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
    <div style="width: 150px; border: 1px solid black; overflow-wrap: break-word;">
        <div>Initially only implemented client-side in web browsers,
            JavaScriptJavaScriptJavaScriptJavaScriptJavaScript engines</div>
    </div>
</body>
</html>