CSS --- solve text overflow, line feed, css --- line feed

CSS --- solve text overflow, line feed, css --- line feed

When we set my div or other text boxes to a fixed width, too much text will overflow (displayed outside the area without line breaks ).

In this case, we can solve the problem by using several elements in Css. The following three problems can be solved:

1. The word-break attribute specifies the processing method for automatic line feed.

word-break: normal|break-all|keep-all;

Value	Description
Normal	Use the default line feed rule of the browser.
Break-all	Line breaks are allowed in words.
Keep-all	You can only wrap a line at a halfwidth space or a hyphen.

2. The overflow attribute specifies what happens when the content overflows the element box.

Value	Description
Visible	Default value. The content will not be trimmed and will be displayed outside the element box.
Hidden	The content is trimmed and the rest is invisible.
Scroll	The content is trimmed, but the browser displays a scroll bar to view other content.
Auto	If the content is trimmed, the browser displays a scroll bar to view other content.
Inherit	Specifies that the overflow attribute value should be inherited from the parent element.

3. Set the white-space attribute to process the white space in the element.

Value	Description
Normal	Default value. The blank space is ignored by the browser.
Pre	The blank space is retained by the browser. The behavior is similar to the <pre> label in HTML.
Nowrap	The text will not wrap, and the text will continue on the same line until the <br> label is encountered.
Pre-wrap	The blank character sequence is retained, but the line feed is normal.
Pre-line	Merges the blank character sequence, but retains the line break.
Inherit	Specifies that the value of the white-space attribute should be inherited from the parent element.

I use word-break: break-all to wrap text, because our characters are Chinese, leading to line breaks. When you use overflow, a scroll bar is displayed. If yes

A scroll bar is allowed. White-space is a blank character in the text. If the text contains many blank characters, we can consider adding this attribute.

Css, text wrapping

CSS force line feed/automatic line feed/force line feed

In general, elements in the <div> or <p> box model will wrap by default. The default style is white-space: normal, but special situations are not ruled out, for example, testers have special habits, so we need to set a forced line feed style.
Force line feed:
Word-break: break-all;/* supports IE, chrome, and FF */
Word-wrap: break-word;/* supports IE, chrome, FF */

Automatic line feed:
Word-wrap: break-word;
Word-break: normal;

Force do not wrap:
White-space: nowrap;

CSS settings do not change rows:
Overflow: hidden hide
White-space: normal default
Pre line breaks and other blank characters will be protected
Nowrap forces all text to be displayed in the same row until the text ends or encounters a br object

Set forced line feed
Word-break:
Normal. line breaks are allowed according to the text rules of the Asian and non-Asian languages.
Break-all: this behavior is the same as that of the Asian language normal. It also allows non-Asian text lines to be broken in any word. This value is applicable to Asian texts that contain non-Asian texts.
Keep-all: same as normal in all non-Asian languages. Chinese, Korean, and Japanese cannot be disconnected. This solution is suitable for non-Asian texts that contain a small number of Asian texts.

English without line breaks
Add word-break: break-all in CSS to solve the problem. This problem is only available in IE. In FF test, FF can add a scroll bar by itself, which does not affect the effect.
When Skin is recommended, remember to add word-break: break-all to the body to solve the problem that the IE framework is opened in English.
The following references the description of word-break. Note that word-break is a private attribute of IE5 +.
Syntax:
Word-break: normal | break-all | keep-all
Parameters:
Normal: line breaks are allowed according to the text rules of the Asian and non-Asian languages.
Break-all: this behavior is the same as that of the Asian language normal. It also allows non-Asian text lines to be broken in any word. This value is applicable to Asian texts that contain non-Asian texts.
Keep-all: same as normal in all non-Asian languages. Chinese, Korean, and Japanese cannot be disconnected. Suitable for non-Asian texts that contain a small number of Asian texts
Note:
Set or retrieve the line feed behavior of text in an object. Especially when there are multiple languages.
Use break-all for Chinese characters.
The corresponding script feature is wordBreak. For more information, see my other bibliography.
Example:
Div {word-break: break-all ;}

How can css + div solve text overflow?

Width: 200px; white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis; overflow: hidden; prevents text overflow and displays excessive ellipsis.
Thank you!