CSS control text Wrap

Source: Internet
Author: User

Automatic line-wrapping problem, normal character line is more reasonable, and continuous digital and English characters are often the container brace big, it is a headache, the following is how CSS to achieve change

Method of the line

For block-level elements such as Div,p
Line wrapping for normal text (Asian and non-Asian text) elements have default white-space:normal, and wrap after defined width

Html

line breaks for normal text (Asian and non-Asian text) elements have the default white-space:normal when defined

Css
#wrap {white-space:normal; width:200px;}

1. (IE) consecutive English characters and Arabic numerals, using Word-wrap:break-word; or word-break:break-all; implement force break
#wrap {word-break:break-all; width:200px;}

Or
#wrap {word-wrap:break-word; width:200px;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effect: line wrapping can be implemented

2. (Firefox browser) consecutive English characters and Arabic numerals of the break, all versions of Firefox did not solve this problem,
We only have to hide the characters beyond the bounds or add scrollbars to the container.

#wrap

{word-break:break-all; width:200px; overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effect: Container normal, content hidden

For table

1. (IE) use table-layout:fixed; Force table width, excess content hidden





Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

Effect: Hide Excess content

2. (IE) use table-layout:fixed; force the width of the table,
The inner layer td,th adopts word-break:break-all; or word-wrap:break-word; line breaks

ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890 ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890

Effect: can be changed line

3. (IE) nested div,p in td,th, etc. using the div,p of the above mentioned line-wrapping method

4. (Firefox browser) use table-layout:fixed; Force table width, inner layer td,th
To use Word-break:break-all or Word-wrap:break-word;
Use Overflow:hidden; hide beyond content, here Overflow:auto; not working






abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890

Effect: Hide more than content

5. (Firefox browser) in td,th nested div,p, etc. using the above mentioned method of dealing with Firefox
Run the Code box 100 footage Mesh
Finally, the probability of this phenomenon is very small, but can not rule out the user's spoof. If

If you have any questions, please leave a message below.

The following is the effect of the examples mentioned

 
  
 <title>Character Line Wrapping</title>

div

All white-space:normal;

WordWrap still occurs in a TD element the have its WIDTH attribute set to a value smaller than the unwrapped content of th E cell, even if the NoWrap property was set to true. Therefore, the WIDTH attribute takes precedence over the NoWrap property in this scenario

IE word-wrap : break-word ;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

IE word-break:break-all;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Firefox/ word-break:break-all; overflow:auto;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

table

table-layout:fixed;

Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

table-layout:fixed; word-break : break-all; word-wrap : break-word ;

Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

FF table-layout:fixed; overflow:hidden;

abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.