热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

截取长文本,显示省略号(多行)

其实也是前些日子做移动端的页面接到这么个需求,本来以为这没法实现,同事跟我说-webkit-line-clamp属性可以,就去查了查,果然Pc端基本不会有这种需求,因为这个方法兼容性太差,浏览

其实也是前些日子做移动端的页面接到这么个需求,本来以为这没法实现,同事跟

我说-webkit-line-clamp属性可以,就去查了查,果然

Pc端基本不会有这种需求,因为这个方法兼容性太差,浏览器份额不是webkit

占大头(特别是天朝),看前缀就知道只支持webkit内核,他属于webkit内部属性,

和-webkit-text-size-adjust:none(这个Pc端已经不在支持,移动端还可以使用)

类似,但是移动端不一样,现在移动端基本是ios和Android的天下,这个属性还是

很有用的,只需针对WP和Firefox os加上一个max-height 就能防止文本溢出,

但不会出现省略号,如果不需要支持上述两个max-height都不需要。

说这么多还是来个栗子http://jsbin.com/vefeb/1/

 

我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本
换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换
行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行

 

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

 -webkit-line-clamp需配上overflow : hidden  text-overflow: ellipsis和伸缩合

模型当中的两个属性display: -webkit-box  -webkit-box-orient: vertical;

如果你是三行溢出显示省略号,那-webkit-line-clamp: 3 依次类推,四行就是

4、五行就是5。。。

当然你要所有浏览器实现都表现一致,那还得依赖js,利用高度的比较加上正则的

替换来实现,实例链接http://jsbin.com/vefeb/4/

 

$(".text").each(function(i){
    var divH = $(this).height(),
     $p = $("p", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});

 


推荐阅读
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • 自动验证时页面显示问题的解决方法
    在使用自动验证功能时,页面未能正确显示错误信息。通过使用 `dump($info->getError())` 可以帮助诊断和解决问题。 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 本文介绍了如何使用 CMD 批处理脚本进行文件操作,包括将指定目录下的 PHP 文件重命名为 HTML 文件,并将这些文件复制到另一个目录。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 本文详细介绍了DMA控制器如何通过映射表处理来自外设的请求,包括映射表的设计和实现方法。 ... [详细]
  • 本文记录了 JavaScript 中正则表达式的使用方法和常见操作,包括匹配、替换、搜索等。 ... [详细]
  • 检查在所有可能的“?”替换中,给定的二进制字符串中是否出现子字符串“10”带 1 或 0 ... [详细]
  • Spark中使用map或flatMap将DataSet[A]转换为DataSet[B]时Schema变为Binary的问题及解决方案
    本文探讨了在使用Spark的map或flatMap算子将一个数据集转换为另一个数据集时,遇到的Schema变为Binary的问题,并提供了详细的解决方案。 ... [详细]
  • 在JavaWeb开发中,文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件,都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件,该库提供了强大的文件解析和存储能力,能够高效地处理各种文件类型。此外,为了提高系统的安全性和稳定性,还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]
  • MySQL的查询执行流程涉及多个关键组件,包括连接器、查询缓存、分析器和优化器。在服务层,连接器负责建立与客户端的连接,查询缓存用于存储和检索常用查询结果,以提高性能。分析器则解析SQL语句,生成语法树,而优化器负责选择最优的查询执行计划。这一流程确保了MySQL能够高效地处理各种复杂的查询请求。 ... [详细]
  • 在 JavaScript 中,浮点数的除法运算常常会出现精度问题。本文介绍了一种方法,通过自定义函数来精确控制除法运算结果的小数位数,确保计算结果的准确性。该方法不仅适用于除法,还可以扩展到其他浮点数运算,有效避免了 JavaScript 在处理浮点数时常见的精度误差。 ... [详细]
  • 深入解析Java虚拟机的内存分区与管理机制
    Java虚拟机的内存分区与管理机制复杂且精细。其中,某些内存区域在虚拟机启动时即创建并持续存在,而另一些则随用户线程的生命周期动态创建和销毁。例如,每个线程都拥有一个独立的程序计数器,确保线程切换后能够准确恢复到之前的执行位置。这种设计不仅提高了多线程环境下的执行效率,还增强了系统的稳定性和可靠性。 ... [详细]
  • 本文探讨了在任务完成后将其转换为最终状态时的异常处理机制。通过分析 `TaskCompletionSource` 的使用场景,详细阐述了其在异步编程中的重要作用,并提供了具体的实现方法和注意事项,帮助开发者更好地理解和应用这一技术。 ... [详细]
author-avatar
央央说去_531
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有