CSS-line feed and css line feed

CSS-line feed and css line feed

About text overflow line feed problem, first look at the relevant attributes involved with line feed, view: http://www.w3school.com.cn

I. word-break

Definition: the word-break attribute specifies the processing method for automatic line feed.

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. word-wrap

Definition: the word-wrap attribute allows long words or URLs to wrap into the next line.

Value	Description
Normal	Wrap only at the allowed broken word points (the browser keeps processing by default ).
Break-word	Wrap a line in a long word or URL address.

 

 

 

 

For non-CJK text (such as English) line feed rules, word-wrap: break-wordTo switch long words to the next line (split words ).

CJK (Chinese/Japanese/Korean)

Iii. white-space

Definition: how to process the white-space attribute settings.

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.

 

 

 

 

 

 

 

 

 

 

Iv. application scenarios

If you have a good understanding of the above attributes, it would be nice if you do not know it clearly. Please see the effect: demonstration effect, runjs

Below is:

1. Default

 

2. word-break: break-all

 

3. word-wrap: break-word

 

4. white-space: nowrap

V. Conclusion

I hope this will be helpful to you. Please correct the error. The article will be changed or updated from time to time. Please indicate the source for reprinting to facilitate tracing.