How to use CSS to solve the problem of automatic line wrapping in English words

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags automatic broken code content control default default value how to

Prevent form/layer bursting and prevent word from breaking

The problem of automatic line-wrapping in English words can be said to have tortured many people
If a word is written very long, it will break the form, and the words will be opened in the tube.

Prevent form from bursting

This question has been mentioned by a lot of people, later in the earlier version of I also resolved, but caused the English words were broken up line, so the new template does not have to add some CSS code to control this. Today, I found the solution is simple.

According to most articles on the Web, just add in CSS:
Code
..........

Table {

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

Div{word-break:break-all;word-wrap:break-word;

Can solve the table and the layer is bursting, initially I did the same. However, this code will create a problem, you will find that the English words are all truncated, which does not conform to the English writing habits and is not conducive to reading.

Later I found that the code could be rewritten to prevent the form/layer from bursting and the word breaking.
Follows:
Code

Table {
table-layout:fixed;
Word-wrap:break-word;
}
div {
Word-wrap:break-word;
}

That's the code I'm using now.
-----------------------------------------------------

According to the CSS2 Chinese Handbook of Su Ying (Rainer Su)

Word-break Version: ie5+ Proprietary property Inheritance:
Syntax:
Word-break:normal | Break-all | Keep-all
Value:
Normal: Default value. Allow wrapping between words
Break-all: This behavior is the same as normal for Asian languages. Also allows any word in a non-Asian text line to be disconnected. This value is appropriate for Asian text that contains non-Asian text
Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word is not allowed to break. Non-Asian text for small amounts of Asian text

Description:
Sets or retrieves the word wrapping behavior within the text within an object. Especially in the presence of multiple languages.
For Chinese, you should use Break-all.
This property is read-only for Currentstyle objects. is writable for other objects.
The corresponding script attribute is wordbreak.
Example:
div {word-break:break-all;}
Apply to:
ie5.0+

Word-wrap Version: ie5.5+ Proprietary property Inheritance:
Syntax:
Word-wrap:normal | Break-word
Value:
Normal: Default value. Allow content to top open specified container boundary
Break-word: Content wraps within boundaries. 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 intended for use only with a layout object, such as a block object. Inline elements to use this attribute, you must first set the height or width property of the object, or set the Position property to differs, or set the display property to block.
This property is read-only for Currentstyle objects. is writable for other objects.
The corresponding script attribute is wordwrap.
Example:
div {word-wrap:break-word; word-break:break-all;}

Pay attention to this
Break-word: Content wraps within boundaries. If necessary, word wrapping (Word-break) will also occur.

So Word-wrap is enough, the default will not open the word line, but if there is a very long word, such as the last time a wrong version of the history of the scariest 12 English words, it will also be dismantled, so as to avoid the table was broken.
But this has not been the CSS2 standard, so Mozilla does not support this attribute, if we all good to write English words there is no thing, Firefox is not to open word for line, if you encounter someone write a very long word, Mozilla Firefox will not break the line has been breaking.
Do not know CSS3 will not take this attribute to go in, but to tell the truth, too BT word is OK ...

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.