今天碰到一个比较有意思的问题。但是被我很快解决了。问题是这样的:
在新闻列表页呢,如果一条新闻的长度唱过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就可以解决这个问题。
相关推荐
本项目是MUI列表条目点击事件的示例代码,目的是让大家了解MUI的点击事件该怎么写。
Word中如何添加自动更正条目.docx
ListView中添加倒计时条目。
css 的架构信息 和 javascript 动态处理
在Word2021中添加自动更正条目.docx
列表分组展示,滑动组件悬浮固定效果
Andriod 自定义的PopupWindow(实现手机中间,底部,列表条目位置弹出等几种效果)
2.主页面底部 添加【刷新列表】按钮,用于重新加载服务器列表(其实 查询栏【恢复】按钮也有该功能效果,只是很多人可能不知道) 3.新增/修改服务器区域 增加 Window/Linux 单选项,支持采用 SSH 远程连接linux系统...
下面小编就为大家分享一篇Android ListView自动生成列表条目的实例,具有很好的 参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
listview多条目listview多条目listview多条目listview多条目listview多条目listview多条目
显示列表条目的完成状态,以不同的颜色区分。只看未完成条目,隐藏已完成和抛弃的列表条目,再次点击可完全显示。 什么是脚本? 脚本是批处理文件的延伸,是一种纯文本保存的程序,一般来说的计算机脚本程序是确定...
TIA博途中文本列表的具体使用方法介绍与示例
选择所有 作者:Rudy Affandi (2015) 版本 1.0.0 ... 这个小钩子在控制面板的条目列表中添加了检查所有功能。 安装 将add-ons/checkall文件夹复制到 Statamic 网站中的_add-ons文件夹。 变更日志 1.0.0 - 初始版本
隐藏添加删除里程序条目,对付检查。简单delphi源码。需要就看看
QQ 会话条目的侧滑菜单实现原理就是 重写 LinearLayout 或者HorienzentalScrollView ,划出来的菜单无疑是已经摆放好,只是在屏幕的可见范围之外而已,我们只需要做做事件传递的工作和一些逻辑即可。源码主要以重写...
有时需要在输入框中选择多项条目时,比如发邮件选取收件人时,该怎么实现自动匹配输入的内容以及添加多个条目呢?如有此疑惑,可下载代码研究方法.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分...
Listview动态增加与删除控件条目,条目内容可编辑
拖动RecyclerView条目实现条目排序,以及侧滑条目删除条目。
高校咨询新闻条目设计.html
然后,该工具根据芝加哥风格手册的作者日期系统为该书创建参考列表条目和引文。 然后,您可以在网页中显示这些参考列表条目和引文。 对于引文,您在网页中键入页码。 然后,您可以将参考列表条目或引文复制到剪贴板...