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

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.