Line feed, text hidden ellipsis, text hidden ellipsis

Source: Internet
Author: User

Line feed, text hidden ellipsis, text hidden ellipsis
1. A line exceeds text hiding

Overflow: hidden;/* hide text automatically */text-overflow: ellipsis;/* Add ellipsis after text hiding */white-space: nowrap;/* force line breaks */

 

2. div displays two lines of text, and the ellipsis (...) is displayed when more than two lines are exceeded.
Overflow: hidden; text-overflow: ellipsis; text-overflow:-o-ellipsis-lastline; display:-webkit-box;-webkit-line-clamp: 2; /* limit the number of rows */-webkit-box-orient: vertical;

 

3. Do not wrap the white-space attribute
Value Description
Normal Default value. The blank space is ignored by the browser.
Pre The blank space is retained by the browser. The behavior is similar to the <pre> label in HTML.
Nowrap The text will not wrap, and the text will continue on the same line until the <br> label is encountered.
Pre-wrap The blank character sequence is retained, but the line feed is normal.
Pre-line Merges the blank character sequence, but retains the line break.
Inherit Specifies that the value of the white-space attribute should be inherited from the parent element.

 

 

 

 

 

 

 

 

 

4. How to set the word-break attribute to automatically wrap
Value Description
Normal Use the default line feed rule of the browser.
Break-all Line feed is allowed within a word (for long words or URLs)
Keep-all You can only wrap a line at a halfwidth space or a hyphen.

 

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.