CSS Auto-wrap _css/html

Source: Internet
Author: User
We all know that continuous English or digital can be the container is large, can not be based on the size of the container to automatically wrap, the following is how CSS will be the way they line!
For Div
1. (ie browser) white-space:normal; Word-break:break-all; The former follows the standard.

#wrap {white-space:normal; width:200px;}
Or
#wrap {word-break:break-all;width:200px;}

ddd1111111111111111111111111111111111

Effect: line wrapping can be implemented

2. (Firefox browser) white-space:normal; Word-break:break-all;overflow:hidden, the same FF also does not have a good method of implementation, can only hide or add scroll bar, of course, no scroll bar effect better!

#wrap {white-space:normal; width:200px; overflow:auto;}
Or
#wrap {word-break:break-all;width:200px; overflow:auto;}

ddd1111111111111111111111111111111111111111

Effect: Container normal, content hidden

For table

1. (ie browser) using style table-layout:fixed;







ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890


Effect: can be changed line

2. (IE) using styles table-layout:fixed and nowrap







ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890


Effect: can be changed line

3. (IE) use the style table-layout:fixed and nowrap in the case of fixed TD size using percentages








ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890
ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890


Effect: Two TD all normal line break

4. (Firefox browser) use the style table-layout:fixed and nowrap with a percentage fixed TD size, and use div









ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890

ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890


Here the cell width must be defined as a percentage

Effect: normal display, but can not wrap (note: In the FF has not been able to make the container contents of a good way to wrap, can only use overflow to hide the content of the more, so as not to affect the overall effect)
  • 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.