列表条目超长做到自动添加省略号的三种方法

最新推荐文章于 2024-04-13 22:16:35 发布

最新推荐文章于 2024-04-13 22:16:35 发布 · 643 阅读

文章标签：

#css

web 同时被 2 个专栏收录

22 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

本文介绍了一种在新闻列表页中处理标题过长问题的方法，包括服务端PHP处理、前端JS实现及CSS样式控制，有效避免了中文乱码并确保各种情况下都能正常显示。

今天碰到一个比较有意思的问题。但是被我很快解决了。问题是这样的：

在新闻列表页呢，如果一条新闻的长度唱过17个字符，将后面的内容替换为'...',这个看起来其实不是有多困难.

方法一：在服务端做下控制就行。

if(str_length($title) >= 17 ){
    $title = substr($title,0,14) . '...'
}

但是有一个问题是php在处理中文的时候会出现乱码，这时候我们想到了mb_substr，但是有时候他还是处理不了一些特殊情况，比如中英文数字都有的情况。这时候有两种方法，都是有前端来做。

方法二：通过js来实现（依赖jquery):

<a class='fz_substr' data-length='17'>文章标题无限长</a>

 $('.fz_substr').each(function () {
        // ie8 not support this action;
        // use pure javascript
        return;
        var me = this;
        var text = $(me).text().trim();
        var substr_length = parseInt($(me).data('length'));
        if(text.length > substr_length) {
            text = text.substr(0, substr_length - 10) + '...';
            $(me).text(text);
        }
    });

通过上面的js代码就可以实现了。

方法三：通过css来实现，这个做起来比较简单：

先给title的超链接加一个class，比如fz_substr.

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 17em;
line-height: 16px;
//这里你需要根据你自己的项目来调整line-height、height的数值。

通过上面的css就可以解决这个问题。