My understanding of the Text-overflow

　We are in the process of making a website, often encounter such as news headlines too long but we do not want to let the title wrap, then we will use a common attribute:text-overflow to cut the text line;

This is stated on the W3school:

I used this property for the first time is not valid, the property value write clip, ellipsis have no effect, feel very distressed, later consulted the data and practice, I came to use text-overflow To achieve one-line text clipping, the following 3 conditions are met:

1.display:block; Elements must be block-level elements, inline-block are not, so span or a in the text if you want to cut a single line will need to set display:block; P is not required;

2.white-space:nowrap; Specifies that the text does not wrap, and the text continues on the same line. This is necessary to achieve single-line text clipping, but this property can be broken by <br> tags;

3.overflow:hidden; The essence of clipping the text is to hide the extra parts, so this is also a must attribute.

Then, to meet the above 3 conditions, we can make the text-overflow effective, we generally give ellipsis to cut the extra parts for ... Ellipsis, the clipping position is the element width, so when the width of the element is equal to the width of the browser and the text is much more than the width of the browser clipping;

The use of the situation is often we see is an omitted title, and we want to see the full title, this in W3school, there are examples, in order to not want to check the classmate I wrote below:

After setting the above attribute to the element, simply write the following hover pseudo-class to realize the effect of clicking on the element to see the full text.

div:hover{

Text-overflow:inherit;
overflow:visible;
}

Extended:

　　Why Text-overflow We use a single line of text clipping, and w3school just means that this property is used to trim the text, and we also encounter situations where we need to crop the paragraph:

In fact, this situation is mostly limited to the background to edit the number of words to achieve, but our front-end still can be achieved:

{ display:-webkit-box;

　　　-webkit-box-orient:vertical;

　　-webkit-line-clamp:4;   
}
The code above relates to the box model elastic layout, which is not discussed here, because I still do not understand the 2333.
The code above is only
and a single-line text clipping can be used with confidence, and do not worry about compatibility, I have no problem with the test IE7.

The above is my understanding of the Text-overflow attribute, welcome to discuss and study together. (Another: The code is mostly hand-punched, if there is a mistake, please point out.) There is the first post, slag typesetting, please understand)

My understanding of the Text-overflow