CSS control text line wrapping and clipping

Source: Internet
Author: User
This time for you to bring CSS control text wrapping and clipping, CSS control text wrapping and cutting attention to what matters, the following is the actual case, together to see.

Some CSS properties about line wrapping, cropping

Word-wrap:normal | Break-word

Normal line wrap, content can burst containers, such as long words or long numbers of cases
Break-word the word as the line, and if necessary, the words inside the word are allowed to break

Word-break:normal | Break-all | Keep-all

Normal line wrap, content can burst containers, such as long words or long numbers of cases

Break-all using letters as the basis for line breaks

Keep-all is the same as normal in Chinese and English

White-space:normal | | Pre | | nowrap | | Pre-line | | Pre-wrap | | Inherit

Normal default, blank will be ignored by the browser

The pre blank is reserved by the browser and behaves like a <pre> tag in HTML

nowrap text does not wrap, text will be on the same line until <BR/> tag is encountered

Pre-wrap preserves sequence of whitespace characters, but wraps normally (ie7-not supported)

Pre-line merges a sequence of whitespace characters, but preserves newline characters (ie7-not supported)

Inherit specifies that the value of the White-space property should be inherited from the parent element (ie not supported)

Application:

Text overflow shows ellipsis (...) ):

Text-overflow:ellipsis;
Overflow:hidden;
White-space:nowrap;

Word Wrapping:

/* Use words as a line-change basis */
Word-wrap:break-word;
Word-break:normal;
/* Use letters as the basis for line break */
Word-break:break-all;

The text force does not break the line:

White-space:nowrap;

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Using CSS3 to realize mouse floating enlarged picture

How to deal with the nth-child () compatibility problem under IE8

How to deal with the disappearance of CSS boundary lines

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.