• 站长首页
  • 源码下载
    HTML源码 ASP源码 PHP源码 .NET源码 其他源码
  • 网站模板
    织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板
  • 网站素材
    字体下载 高清图片 网页模板 PSD素材 矢量素材
  • 网页特效
    返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效
  • 站长资讯
    网站运营 建站经验 搜索优化 互联网
快捷导航

源码下载

HTML源码 ASP源码 PHP源码 .NET源码 其他源码

网站模板

织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板

网站素材

字体下载 高清图片 网页模板 PSD素材 矢量素材

网页特效

返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效

站长资讯

网站运营 建站经验 搜索优化 互联网

软件下载

电脑软件 安卓软件 苹果软件

建站功具

WEB服务器 网页设计 FTP工具 建站辅助

建站教程

服务器教程 CMS教程 脚本之家
重庆站长网

模板

投稿中心
  • 站长首页

  • 源码下载

  • 网站模板

  • 网站素材

  • 网页特效

  • 站长资讯

  • 软件下载

  • 建站功具

  • 建站教程

  • 程序插件

  • 网站基础

  • 帮助中心

HTML源码 ASP源码 PHP源码 .NET源码 其他源码 微擎微赞模块 VIP源码 淘宝客网站源码

织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板 WordPress主题

字体下载 高清图片 网页模板 PSD素材 矢量素材 免抠素材 PPT模板

返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效 css3特效 日期时间 选项卡_滑动门 HTML5小游戏 动画效果 表单按钮 jquery特效

网站运营 建站经验 搜索优化 互联网

电脑软件 安卓软件 苹果软件

WEB服务器 网页设计 FTP工具 建站辅助

服务器教程 CMS教程 脚本之家

shopex插件 Discuz!插件 pjblog插件 wordpress插件 dedecms插件 ecshop插件 phpcms插件

HTML教程 DIV&CSS Javascript/Ajax Dreamweaver XHTML教程 W3C教程

关于我们 联系我们 广告服务 投稿指南 友情链接 积分金币规则 加入VIP会员

当前位置:首页 > 网站基础 > HTML教程 > html文本溢出显示省略字符的两种常用解决方法

html文本溢出显示省略字符的两种常用解决方法

时间:2019-11-14 12:37:07 来源:用户投稿 浏览: 次

解决效果如下:

html文本溢出显示省略字符的两种常用解决方法



css代码:            
display: -webkit-box;
            display: -moz-box;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;   /*显示行数*/

方法二:使用jQuery截取替换文本内容的方式解决

解决效果如下:

html文本溢出显示省略字符的两种常用解决方法



js代码:   
$(".text").each(function() {
    if ($(this).text().length > 20) {//要求字数大于20才进行字数替换
        $(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
        //从0到80开始替换,将剩余文本内容替换为"..."
    }
})
上述两种方法作用在文本内容的类名即可。

    (作者:佚名)   /   责任编辑:重庆站长网
    • 上一篇:对于初学者不错的XHTML教程
    • 下一篇:实例学习网页制作中常用的网页表单的应用
    • 收藏
    • 打印

    相关阅读

  • HTML 编辑器_html基础知识_html基础教程

    使用 Notepad 或 TextEdit 来编写 HTML 可以使用专业的 HTML 编辑器来编辑 HTML: Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML Editor 不过,我们同时推荐使用文本编辑器来学习 HTML,比如 Notepa...

  • 2019-11-14
  • html2canvas将html代码转为图片的使用方法

    html2canvas,这是一个非常著名的从浏览器网页截图的开源库,使用很方便,功能也很强大。这篇文章给大家介绍html2canvas 将html代码转为图片的使用方法...

  • 2019-11-14
  • HTML页面原生VIDEO标签隐藏下载按钮功能

    这篇文章主要介绍了HTML页面原生VIDEO标签隐藏下载按钮功能,非常不错,具有参考借鉴价值,...

  • 2019-11-14
  • html文本溢出显示省略字符的两种常用解决方法

    本文给大家分享html文本溢出显示省略字符的两种常用解决方法,...

  • 2019-11-14

    资讯列表

    • HTML教程
    • DIV&CSS
    • Javascript/Ajax
    • Dreamweaver
    • XHTML教程
    • W3C教程

    文章排行榜

    • 1 解决DedeCms5.7更新软件不能上传图片问题
    • 2 移动web端屏幕适配(rem)
    • 3 百科外链时代终结:百度百科参考资料全部替换为百度快照
    • 4 网页文本排版知识:为正确的内容使用恰当的标签
    • 5 大型强子对撞机首次加速原子:达到接近光速
    • 6 自身产品运营数据分析的5个步骤
    • 7 企业网站制作怎么样可以把握好用户体验
    • 8 精选15个国外CSS框架
    • 9 桌面远程管理程序使用教程(最新)
    • 10 CSS基础入门教程之CSS id 选择器

    热门标签

      魅族 魅族Flyme Facebook Facebook隐私 Faceboo 漏洞 HTTPS 融360 叶大清 融360法人 PHP8 JIT 荣耀10i 京东 京东汽车 汽车 电商 Ruby 恶意后门 代码
    返回
    顶部
    关于我们 联系我们 广告服务 投稿指南 友情链接 积分金币规则 加入VIP会员

    备案号:

    Copyright © 2016-2018 重庆站长网 版权所有

    ×