How Can I Prevent Long Text from Overflowing in HTML?

Word-Wrapping Long Text in HTML

In HTML, it can be challenging to control the text flow when it exceeds the designated width of a container. This issue often arises with lengthy words or strings of characters that do not break automatically.

Solution Using CSS

One effective solution is to utilize the word-wrap property in CSS. By setting it to break-word, you can instruct the browser to hyphenate or break excessively long words to fit within the defined width of the container. This ensures that the text remains readable and doesn't spill over outside the intended boundaries.

Example Code

Here's an example of how to apply CSS to achieve word-wrapping:

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

Within this div, any text that exceeds the specified width of 200px will automatically wrap to the next line. This method is widely supported in modern web browsers.

The above is the detailed content of How Can I Prevent Long Text from Overflowing in HTML?. For more information, please follow other related articles on the PHP Chinese website!