Home > Web Front-end > HTML Tutorial > 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
Release: 2016-06-24 12:03:01
Original
1157 people have browsed it

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;}
Copy after login

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



Related labels:
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template