Too many characters in the list overflow using the ellipsis css method, ellipsis css

Too many characters in the list overflow using the ellipsis css method, ellipsis css

We often encounter too many texts. To avoid breaking the original layout, we need to replace the extra texts with ellipsis to achieve the following effects:

• There are too many words, wife and wife ......
• This is not much.

Html: this is a list. Ul/ol.

<Ul> <li> This is a short sentence. </li> <li> 403 the reason is that the server rejects your address request or you have no permission to access the website, it is useless to provide identity authentication, that is, the user is forbidden to access. However, unless you contact the Web server administrator, the status code 403 cannot be resolved on your own. </Li> </ul>

First, the ellipsis css code is: text-overflow: ellipsis; note that this line of code often does not work because it must meet two conditions: 1. The width must be set; 2. Set both white-space: nowrap (do not wrap); and overflow: hidden (the excess part is hidden ). Therefore, the complete css code:

Li {width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; // if it is an inline label, you also need to add this line of code because it is useless to set the width of the inline label. Here is the li tag, which is a block, so it is not required .}

However, the problem arises. After overflow: hidden is set for li, the list-style-type of the entire list does not work anymore. No matter which small icon is set, it is useless. The effect is as follows:

Solution: ul adds and sets list-style-position: inside;

But !!! When the icon is displayed, the overflow text is hidden, but the ellipsis (...) does not know where to go ....

In the end, I don't know why this effect occurs. However, I have an indomitable spirit. I started again ....

I changed my mind and changed the style in the list. I will get the ellipsis text and use the <span> package to solve it.

<Ul> <li> <span> This is short text </span> </li> <span> 403 because the server rejects your address request, or you have no access to the website, and it is useless to provide authentication. That is to say, the user is forbidden to access the website. However, unless you contact the Web server administrator, the status code 403 cannot be resolved on your own. </Span> </li> </ul>

 

Css code:

Span {width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; // span is an inline label. Setting width is useless. Therefore, this code is required .}

Ul {
List-style-type: circle;
/* List-style-position: inside; Note: This line of code does not need to be added */
}

:

 

Haha .... Finally achieved !!!! There are both list symbols and ellipsis.

Conclusion: Do not set overflow text directly on the li label, because there will be a list-style-type problem, or wrap it in the span, set the span ellipsis.