`

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

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就可以解决这个问题。

分享到:
评论

相关推荐

    jquery带省略号的分页

    "jquery带省略号的分页"正是其中一种高级的分页效果,它能够帮助用户更优雅地处理大量的数据,提高用户体验。 首先,我们要理解“带省略号分页”的概念。这种分页方式通常指的是当页面的页码过多时,不将所有的页码...

    前端样式 分页中间是省略号

    6. 用户体验优化:为了提高用户体验,可以考虑添加诸如“跳转到第X页”的输入框,或者在鼠标悬停时显示省略号后的完整页码列表,让用户能快速定位到需要的页面。 在“1-中间两个省略号”这个文件中,可能包含了实现...

    MUI列表条目点击事件代码

    MUI框架提供了`mui.init()`方法来初始化页面,并且可以使用`.on()`方法来绑定事件监听器。下面是一个示例代码: ```javascript mui.init({ swipeBack: true //开启右滑返回功能 }); // 绑定列表项点击事件 mui('....

    js动态条目添加

    "js动态条目添加"这个主题聚焦于如何利用JavaScript来实现网页内容的动态添加,而CSS则扮演着为这些动态元素提供美观架构的角色。这里我们将深入探讨这两个技术的核心概念、相互配合的方式以及实际应用。 ...

    android RecyclerView列表自动播放实现

    在Android开发中,RecyclerView是一种非常常用的组件,用于展示可滚动的列表数据。它不仅高效,而且灵活,可以适应各种复杂的布局需求。在这个场景下,我们要实现一个特殊的功能:在RecyclerView列表中的每个条目都...

    TIA博途中文本列表的具体使用方法介绍与示例.docx

    TIA博途是一款由西门子推出的全集成自动化软件,它集成了编程、工程设计、模拟测试等多种功能,广泛应用于工业自动化领域。在TIA博途中,文本列表是一种非常实用的功能,尤其适用于设备操作模式、运行流程和状态的...

    Listview添加倒计时条目

    在Android开发中,ListView是一种常用的视图...通过以上步骤,你可以为每个ListView条目添加实时更新的倒计时,提升应用的交互性和信息传递效率。在具体编码过程中,记得根据实际需求调整和优化代码,以实现最佳效果。

    列表条目分组展示

    在IT界,尤其是在移动应用和网页开发中,"列表条目分组展示"是一种常见的界面设计方式,它有助于用户更高效地浏览和管理大量信息。列表分组通常用于分类显示数据,比如联系人按字母顺序分组,或者电商应用的商品按...

    在Word2021中添加自动更正条目.docx

    使用 Word 2021 的自动更正功能可以提高工作效率和准确性,但需要注意的是,用户需要根据实际需要添加自动更正条目,以避免错误的自动更正。 Word 2021 自动更正功能的优点: * 提高工作效率:自动更正功能可以...

    Word中如何添加自动更正条目.docx

    在这里,你可以浏览并找到你想要添加自动更正条目的特殊符号,比如本文例子中的“≌”号。 3. **设置自动更正条目**: 一旦选中目标符号,点击对话框中的“自动更正”按钮。这将打开“自动更正”对话框。在“自动...

    VBA_为列表框添加列表项的方法.rar

    本资源“VBA_为列表框添加列表项的方法.rar”显然关注于如何使用VBA代码向列表框中动态添加条目。下面将详细阐述这个主题。 首先,我们需要了解在VBA中创建和引用列表框的基本步骤。在用户窗体(UserForm)中,可以...

    ListView中加上加FootView和自动加载listview条目

    这篇博客“ListView中加上加FootView和自动加载listview条目”就详细讲解了如何实现这一功能。 首先,我们需要了解`FootView`的概念。`FootView`是附加在`ListView`底部的一个视图,它可以是一个按钮,提示用户有更...

    在Word2021中删除自动更正条目.docx

    3. **自定义条目**:除了删除不适用的条目外,还可以根据个人需求添加新的自动更正条目,以提高文档编辑效率。 4. **定期清理**:随着时间的推移,积累的自动更正条目可能越来越多,建议定期清理不再使用的条目,...

    ListView视图动态增加与删除控件条目,内容

    在Activity或Fragment中,当需要增加新条目时,调用Adapter的`add()`方法添加数据到数据源,然后调用`notifyDataSetChanged()`通知Adapter数据已改变,ListView会自动刷新并显示新的条目。 4. 实现动态删除: ...

    自动生成目录列表自动生成目录列表

    在IT行业中,自动生成目录列表是一项非常实用的功能,尤其对于文档管理和阅读体验有着显著的提升。这个功能通常出现在各种文档编辑器、PDF阅读器、Markdown工具以及网站内容管理系统中。目录列表可以帮助用户快速...

    Android设置当TextView中的文字超过TextView的容量时用省略号代替

    对于ListView或RecyclerView等列表组件,由于每个列表项可能包含一个TextView,你可能需要在适配器的 `getView()` 或 `onCreateViewHolder()` 方法中进行上述设置,以确保每个条目的TextView都能正确处理超长文本。...

    Android ListView自动生成列表条目的实例

    本实例将详细介绍如何在Android中使用ListView自动生成列表条目。 首先,我们需要创建一个XML布局文件,这里为`activity_list.xml`,它是ListView的主要容器。XML代码如下: ```xml android:orientation=...

    Android-RecyclerView优雅的实现多条目布局

    在Android应用开发中,RecyclerView是用于展示数据列表的一个强大组件,它替代了早期的ListView,提供了更高效的数据绑定和滚动性能。本篇文章将深入探讨如何优雅地在RecyclerView中实现多条目布局,使得UI设计更加...

    C#dataGridView中输入框自动提示、自动完成、自动补全功能

    在C# WinForm开发中,`dataGridView`是一个常用的...通过以上方法,我们可以为C# WinForm中的`dataGridView`输入框提供高效且友好的自动提示、自动完成和自动补全功能,显著提升用户在操作表格数据时的效率和满意度。

Global site tag (gtag.js) - Google Analytics