Home  >  Article  >  Web Front-end  >  CSS intercepts strings and displays excess text with ellipses_html/css_WEB-ITnose

CSS intercepts strings and displays excess text with ellipses_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:03:011133browse

I recently learned that css also has such a powerful side~~~

Make a page similar to a forum. The user avatar is 70px, but the user name cannot be limited. It can be either English or Chinese. You said that if he chooses "My name is so long, what should you do?", then I will be in pain~~

Fortunately, I discovered css out of misfortune. I never knew about such a crazy side, so I wrote it down to share with everyone

It’s very simple, don’t make too much noise, just open the chrysanthemum:

The settings in the css are as follows:

a.name{	line-height: 30px;	text-align: center;	<span style="color:#ff0000;">text-overflow:ellipsis;</span>//让超出的用...实现	<span style="color:#ff0000;">white-space:nowrap;</span>//禁止换行	<span style="color:#ff0000;">overflow:hidden;</span>//超出的隐藏	display: block;}

I wrote the username with a tag, so I need to display:block it.

Well, it’s very simple, but it’s very useful.

(PS: IE6 is not supported!)


If you have any advice, please add QQ: 1740437



Statement:
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