Text overflow automatically displays ellipses css method

This time I will bring you the method of automatically displaying ellipsis css when text overflows. What are the precautions for automatic display of ellipsis css when text overflows? The following is a practical case, let’s take a look.

We often encounter too much text, and in order not to break the original layout, we need to replace the extra text with ellipses to achieve the following effects:

• Mrs. Text There are so many...

• This is not much.

html: This is a list. Both ul/ol are fine.

<ul>
    <li>这是个短句子</li>
    <li>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</li></ul>

First of all, the css code of the ellipsis is:

text-overflow: ellipsis; Note that this line of code often does not work because it must meet two conditions: 1. The width must Settings; 2. Set white-space: nowrap (no line wrapping); and overflow: hidden (the excess part is hidden) at the same time. Therefore, the complete css code:

li {
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//如果是一个inline标签，还需要加入这一行代码，因为对于inline标签，设置width没有用。这里是li标签，本来就是block，因此不需要。}

However, here comes the problem. After setting overflow: hidden for li, the

list-style-type of the entire list does not work again, regardless of the setting. None of the small icons are useful. The effect is like this:

Solution: ul add setting list-style-position: inside;

But! ! ! At this time, the icon is displayed and the overflow text is hidden, but the ellipses are nowhere to be found. . . .

In the end, I don’t know why it has such an effect. However, I have an indomitable spirit, and I started again. . . .

I changed my mind and modified the style in the list, which affects the whole body. I will wrap the text with ellipses with and that will solve it.

<ul>
    <li><span>这是个短文字</span></li>
    <li><span>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</span></li></ul>

css code:

span{
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//span是一个inline标签，设置width没有用。因此需要这句代码。}

ul{
    list-style-type:circle;
    /*list-style-position: inside;注意，不需要添加这行代码*/
}

Hahaha. . . . Finally it happened! ! ! ! There are both list symbols and ellipses.

Conclusion: When setting overflow text, do not set it directly on the li tag, because there will be list-style-type problems. It is better to wrap it in span and set the span ellipsis.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Basic knowledge of html in the front-end

Css float box model position

The above is the detailed content of Text overflow automatically displays ellipses css method. For more information, please follow other related articles on the PHP Chinese website!