web 列表自动隐藏多余的文字并显示省略(限制显示行数)

2019-03-28T10:19:00

发现一个很牛逼的样式,可以自动把列表标题之类的多余文字隐藏掉,并在文字末尾显示省略号,且保持列表样式。

具体如下:

    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 宽度设置才能生效。

经验之谈,若有谬误,请留言指正。

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »