Home > Article > Web Front-end > CSS intercepts strings and displays excess text with ellipses_html/css_WEB-ITnose
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;}
Well, it’s very simple, but it’s very useful.
(PS: IE6 is not supported!)
If you have any advice, please add QQ: 1740437