CSS to introduce the method of word wrapping in English words

Source: Internet
Author: User
Tags readable word wrap
CSS lets word wrap in English
In the process of making Web pages, CSS style writing, you may encounter text wrapping problems, in which the English line-wrapping may be bothering a lot of beginners, and today I have the corresponding elaboration of this issue, learning CSS friends should know, Controlling whether text wraps can be adjusted directly using the Word-break in the CSS, but for English, we want to make it meet the needs of all browsers, just this one attribute is not enough.
According to some of the information I personally know, too much English, too long, not only affect the table, but also affect the p, there may be bursting tables and p, for the table and P solutions are different, first of all, we look at the table how to solve the problem.
If you use a table layout, the content in the table is mostly English, and the English will not be wrapped, then you just need to add the following code in the CSS
Table {
table-layout:fixed; Word-break:break-all;
Word-wrap:break-word;
}
If you are using the P+CSS layout, you can add the following code to the CSS when you encounter the text in P that is bursting in English.
p{
Word-break:break-all;
Word-wrap:break-word;
}
According to CSS2 Chinese manual
Word-break version: ie5+ proprietary attribute inheritance: Available
Grammar:
Word-break:normal | Break-all | Keep-all
Value:
Normal: Default value, allowing line breaks between words
Break-all: The behavior is the same as in Asian languages. Also allows non-Asian-language text lines to be broken within any word. This value is appropriate for Asian text that contains some non-Asian text
Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. Suitable for non-Asian texts containing small amounts of Asian text
Description
Sets or retrieves the word wrapping behavior of text within an object. Especially when multiple languages are present.
For Chinese, break-all should be used.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is wordbreak.
Example:
p {word-break:break-all;}
Apply to:
ie5.0+
Word-wrap version: ie5.5+ proprietary attribute inheritance: Available
Grammar:
Word-wrap:normal | Break-word
Value:
Normal: Default value. Allow content to top open specified container boundaries
Break-word: Content will be wrapped within the boundary. If necessary, word wrapping (Word-break) will also occur.
Description
Sets or retrieves whether a career change is broken when the current row exceeds the bounds of the specified container.
This property is used only for objects that have layout, such as block objects. Inline features to use this property, you must first set the height or width property of the object, or set the Position property to absolute, or set the display property to block.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is wordwrap.
Example:
p {word-wrap:break-word; word-break:break-all;}
Watch this.
Break-word: Content will be wrapped within the boundary. If necessary, word wrapping (Word-break) will also occur.
So word-wrap enough, the default will not open word wrapping, but if there really is a very long word, such as the last time a wrong version of the history of the most horrible 12 English words, it will be broken, so as to avoid the form is broken.
But this has not been the CSS2 standard, so Mozilla does not support this attribute, if we all write English words do not matter, Firefox is not open word for line, if someone wrote a very long word, Mozilla Firefox will not change the line has been bursting.
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.