Not worth mentioning, but I have to mention that "CSS text is replaced by vertices in excess of some vertices"-the end of life is ugly

Source: Internet
Author: User
Not worth mentioning, but I have to mention "CSS text is replaced by a few ellipsis."-I accidentally saw an article similar to css skills and experience summary, some of them are very familiar, that is, "the excessive text in the css control element is replaced by ellipsis". Generally, in actual work,

Many product managers have such requirements on the page UI. I still remember that the first time I used this function, I got it through Baidu. Then I recorded it in Notepad once and for all. Later, I basically

I just did not study the principles (in fact, there is no principle, the method is also very simple, O (∩ _ ∩) O Haha ~), It happened again today, so let's take a break.

To implement the question-like function, we commonly use the following code:

p{    width: 100px;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;}

Here, the four css attributes of the P tag are necessary. What are the functions of these attributes?

Width: used to set the width of the p tag. If there is no width, what is "beyond", right? Even if you do not manually set the width for the p tag, the p tag is automatically filled with the parent element, that is, 100%;

White-space: This attribute is incredibly bad. When the special value is "nowrap", why? Because if the text in the block-level element contains more than one row, that is, multiple rows, text is to wrap by default and will never Overflow

But if the element sets this attribute white-space: nowrap, the text will ignore the Width limit of the parent element, and the result is text overflow, such:

That's the result. You say it's not a cow.

Overflow: This attribute tells an element that if its internal elements (images, text, other elements, etc.) are beyond its long and wide range, what should we do? A scroll bar is displayed, or hide the excess part? While we

In the current case, the text that needs to be exceeded is hidden, so we set overflow: hidden.

Text-overflow: This attribute is a new property of CSS3. The following is an official explanation:

We need to set its value to ellipsis, which means replacing the excess text with ellipsis.

The four attribute values are combined to achieve the following effect:

Code

Running result

Conclusion:I hope this article will be helpful to shoes like me.

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.