web 列表自动隐藏多余的文字并显示省略(限制显示行数)
发现一个很牛逼的样式,可以自动把列表标题之类的多余文字隐藏掉,并在文字末尾显示省略号,且保持列表样式。
具体如下:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
其中 text-overflow
在定义了 overflow
之后才会生效。
white-space:nowrap
表示不换行。
补充:
对于一些行内标签,诸如 span、 a、 i 之类的,需要增加两项:
display:inline-block;
width:100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
只有当标签有固定宽度的时候,才能实现多余部分省略显示。而行内标签需要添加 inline-block 宽度设置才能生效。
经验之谈,若有谬误,请留言指正。
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。