How to set text beyond line wrapping in html

Editor to share with you how to set html text beyond line breaks, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

In html, you can set text beyond line wrapping through the word-wrap, word-break, and overflow attributes, simply by adding a "word-wrap:break-word;word-break:break-all;overflow:hidden;" style to the text element.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Encounter a difficult problem, as shown in the figure:

As a result, the effect looks very unsightly, and our ideal state should be to wrap the content in div if it exceeds the width of div.

Solution:

First of all, we need to make sure that div has a width, and then add the css style: the code is as follows:

Word-wrap:break-word; word-break:break-all; overflow: hidden

The results are as follows:

This achieves the effect we want.

The above is all the content of the article "how to set text beyond line wrapping in html". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!