CSS Force wrap, prohibit line wrapping, out of hidden implementations

Source: Internet
Author: User
First, forced line break
1 Word-break:break-all; Only works in English, with letters as the basis for line-wrapping.

2 Word-wrap:break-word; Only works in English, with words as the basis for line change.

3 white-space:pre-wrap; Only works on Chinese, forcing line wrapping.


Both Word-break:break-all and Word-wrap:break-word are able to wrap the contents of their containers, such as Div, in the following different lines:

1, Word-break:break-all
Assuming that the div width is 450px, its contents will go to 450px wrap, if there is a long English word at the end of the line, it will truncate the word, part of the end of the row, and the other part to the next line.

2, Word-wrap:break-word
The example is the same as above, but the difference is that it sees the whole word as a whole, and if the end of the line is not wide enough to display the whole word, it automatically puts the whole word on the next line without truncating the word.

Ii. Prohibition of line breaks

1 white-space:nowrap; Overflow:hidden; Text-overflow:ellipsis;
White-space:nowrap; is to prohibit line breaks.
Overflow:hidden; is to let the extra content hidden, otherwise the content will burst the container.
Text-overflow:ellipsis; Let the extra content to ellipsis ... To express. But this attribute is mainly used in IE and other browsers, opera browser with-o-text-overflow:ellipsis; And the Firefox browser does not have this function, the more content can only be hidden.
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.