Css achieves automatic line feed of div text and alignment after line feed

Automatic line feed of div text

Method 1,

The code is as follows:

Copy code

<Div> 4545454545454545454454545445455454544545 llloioioiiioioioioioio </div> You can add word-break: break-all IE to a non-normal field to force line breaks. However, line breaks are not supported in firefox. We can use another method, we recommend that you add a line break between a long string. <wbr> You can add a line break between several characters, for example, 1111111111 <wbr> 1111111111 <wbr> 11111111). In this way, both ie and firefox can intelligently wrap the line.

Method 2,

The above method requires you to check an instance if you do not feel it is comprehensive.

Add the following style to the DIV whose text is to wrap automatically

 
C code

The code is as follows:	Copy code
White-space: normal; Word-break: break-all; Overflow: hidden;

 
This method is successfully tested on FF3 and IE7.

Method 2,

For div, p, and other block-level elements
The normal text line feed (Asian text and non-Asian text) element has the default white-space: normal, automatically wrap after the defined width

The code is as follows:	Copy code
Html <Div id = "wrap"> normal text wrap (Asian text and non-Asian text) elements have the default white-space: normal, when defined </div> Css # Wrap {white-space: normal; width: 200px ;}

1. (ie browser) for continuous English characters and Arabic numbers, use word-wrap: break-word; or word-break: break-all; to implement forced line disconnection

The code is as follows:	Copy code
# Wrap {word-break: break-all; width: 200px ;} Or # Wrap {word-wrap: break-word; width: 200px ;} <Div id = "wrap"> abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 </div>

Effect: line breaks can be implemented.

2. (Firefox) continuous disconnection of English characters and Arabic numbers. All Firefox versions do not solve this problem. We only need to hide the characters that exceed the boundary or add a scroll bar to the container.

The code is as follows:	Copy code
# Wrap {word-break: break-all; width: 200px; overflow: auto ;} <Div id = "wrap"> abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 </div>

Effect: The container is normal and the content is hidden.

 

Line Feed and align after line feed

If you want to align text after wrapping, use TEXT-ALIGN: justify.

The css code is as follows:

The code is as follows:	Copy code
TEXT-JUSTIFY: inter-ideograph; TEXT-ALIGN: justify