How do long English letters in Div + CSS wrap automatically?

Source: Internet
Author: User
Tags arabic numbers

Automatic line feed is a reasonable line feed for normal characters. Continuous numbers and English characters often increase the container size, which is a headache. The following describes how CSS implements line feed.

Best CSS definition line feedCode

. Wrap {table-layout: fixed; Word-break: Break-all; overflow: hidden ;}
Overflow: hidden; or auto; 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
Html

The normal text line feed (Asian text and non-Asian text) element has the default white-space: normal, when defined

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

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

Abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111

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.

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

Abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111

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

For Table
1. (IE browser) Use table-layout: fixed; to force the width of the table and hide unnecessary content.

Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

Effect: Hide unnecessary content

2. (IE browser) Use table-layout: fixed; to force the width of the table, use Word-break: Break-all in the TD and th layers, or use Word-wrap: Break-word to wrap the line.

Abcdefghigklmnopqrstuvwxyz 1234567890 Abcdefghigklmnopqrstuvwxyz 1234567890

Effect: line breaks are supported.

3. (IE browser) Embedding Div and P in TD and th adopts the wrap method of Div and P mentioned above.

4. (Firefox) Use table-layout: fixed; to force the width of the table, use Word-break: Break-all, or word-wrap: Break-word to form a new line, use overflow: hidden; hide the content that exceeds the limit. Here overflow: auto; cannot work.

Abcdefghigklmnopqrstuvwxyz1234567890 Abcdefghigklmnopqrstuvwxyz1234567890

Effect: Hide more than content

5. (Firefox browser) nesting Div and P in TD and th using the methods mentioned above to deal with Firefox
Run code box
Finally, the probability of such a phenomenon is very small, but it cannot be ruled out by netizens.

The following is an example of the effect

Div All white-space: normal; Wordwrap still occurs in a TD element that has its width attribute set to a value smaller than the unwrapped content of the cell, even if the nowrap property is set to true. therefore, the width attribute takes precedence over the nowrap property in this scenario IE \ word-wrap: Break-word; Abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 IE \ word-break: Break-all; Abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 Firefox/word-break: Break-all; overflow: auto; Abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 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.