When we set my div, or a fixed width of another text box, the text will overflow (shown outside the area without wrapping).
At this point we can use several of the CSS in the solution. There are three of the following that can solve the problem:
The 1,word-break property specifies how the wrap is handled.
Word-break:normal|break-all|keep-all;
| value |
Description |
| Normal |
Use the browser's default line-wrapping rule. |
| Break-all |
Allows line wrapping within a word. |
| Keep-all |
You can only wrap at half-width spaces or hyphens. |
The 2,overflow property specifies what happens when the content overflows the element box.
| value |
Description |
| Visible |
The default value. The content is not trimmed and is rendered outside the element box. |
| Hidden |
The content is trimmed and the rest is not visible. |
| Scroll |
The content is trimmed, but the browser displays scroll bars to see the rest of the content. |
| Auto |
If the content is trimmed, the browser displays scroll bars to see the rest of the content. |
| Inherit |
Specifies that the value of the overflow property should be inherited from the parent element. |
the 3,white-space property sets how to handle whitespace within an element.
| value |
Description |
| Normal |
Default. The blank will be ignored by the browser. |
| Pre |
The blank will be reserved by the browser. It behaves like a <pre> tag in HTML. |
| NoWrap |
The text does not wrap, and the text continues on the same line until the <br> tag is encountered. |
| Pre-wrap |
Preserves the sequence of whitespace characters, but wraps them normally. |
| Pre-line |
Merges a sequence of whitespace characters, but preserves newline characters. |
| Inherit |
Specifies that the value of the White-space property should be inherited from the parent element. |
I'm using Word-break:break-all to wrap the text, because our characters are Chinese, which causes a problem with the line change. Use overflow to make a scroll bar, if it is
Scroll bars are allowed to be used. White-space is a blank character in the text, if the text contains a lot of white space characters we can consider adding this attribute.