CSS lets text display a specific number of lines, superfluous display ellipses

Source: Internet
Author: User
Tags word wrap

/*CSS*/. P{width:200px;Word-break:Break-all;Text-overflow:ellipsis;Display:-webkit-box;/** Object as Telescopic box model display **/-webkit-box-orient:Vertical;/** Set or retrieve the arrangement of child elements of a telescopic box object **/-webkit-line-clamp:2;/** Number of lines displayed **/Overflow:Hidden;/** Hide beyond the content **/}

1,word-break:break-all such as a div width of 200px, its content will go to 200px word wrap, if the end of the line has a long English words (congratulation, etc.), it will truncate the word, to the end of the line is Conra ( Congratulation), the backend portion of the next behavior tulation (conguatulation).
2,word-wrap:break-word example is the same as above, but the difference is that it will congratulation the whole word as a whole, if the line end width is not enough to display the whole word, it will automatically put the whole word to the next line, not the word truncated.

CSS lets text display a specific number of lines, superfluous display ellipses

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.