14. CSS - Automatically wrap a long string when it exceeds the width

1. Related information

When outputting a long string in PHP (the string has no line breaks), it is hoped that the string can automatically wrap when the content exceeds the set length, otherwise the string without line breaks will Exceeding the set width, the page will be stretched infinitely

In pure HTML code, even without any special declaration, it will automatically wrap according to the set width, for example

<code><span>&lt;<span>div</span><span>style</span>=<span>"width: 100px;"</span>&gt;</span>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
<span>&lt;/<span>div</span>&gt;</span></code>

The above code will when the content width exceeds 100px Will automatically wrap the output

But when outputting a long string of php

<code><span>&lt;<span>div</span><span>style</span>=<span>"width: 100px;"</span>&gt;</span><span><span>&lt;?php</span><span>echo</span><span>$long_content</span>; <span>?&gt;</span></span><span>&lt;/<span>div</span>&gt;</span></code>

The content width of $long_content is far more than 100px, you can see that the content output will not automatically wrap the line, it will be based on the string The width of the page is infinitely stretched, that is, it will be stretched as long as it is. The defined width is imaginary, which is obviously not what we expect. 2. Problem description

When a long string is output, the content will not Automatic line wrapping will stretch the page infinitely

3. Solution

Use the following css definition

<code><span>&lt;<span>div</span><span>style</span>=<span>"width: 100px; word-break: break-all;word-wrap: break-word;"</span>&gt;</span><span><span>&lt;?php</span><span>echo</span><span>$long_content</span>; <span>?&gt;</span></span><span>&lt;/<span>div</span>&gt;</span></code>

word-break
1. The attribute specifies the processing method of automatic line wrapping. The value break-all indicates that line breaks are allowed within words. . The
word-wrap
2. attribute allows long words or URL addresses to wrap to the next line. The value break-word means wrapping inside long words or URL addresses.
').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i

').text(i)); }; $numbering.fadeIn(1700); }); }); The above has introduced 14. CSS - Automatically wrap a long string when it exceeds the width, including the content. I hope it will be helpful to friends who are interested in PHP tutorials.