Text overflow automatically displays ellipses css method

php中世界最好的语言
Release: 2018-03-19 13:53:56
Original
2089 people have browsed it

This time I will bring you the method of automatically displaying ellipsis css when text overflows. What are theprecautions 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.

  • 这是个短句子
  • 403是因为服务器拒绝了你的地址请求,或者你根本没权限访问网站,提供身份验证也没用,也就是说,用户被禁止访问了。然而除非与Web服务器管理员联系,否则一旦遇到403状态码都无法自行解决。
Copy after login
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. Setwhite-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,因此不需要。}
Copy after login
However, here comes the problem. After setting overflow: hidden for li, the

list-style-typeof 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 settinglist-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.

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

span{ width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display:inline-block;//span是一个inline标签,设置width没有用。因此需要这句代码。}
Copy after login
ul{ list-style-type:circle; /*list-style-position: inside;注意,不需要添加这行代码*/ }
Copy after login
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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!