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

源码下载

HTML源码 ASP源码 PHP源码 .NET源码

网站模板

织梦模板 ShopEx模板 EcShop模板 Discuz模板

站长素材

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

网页特效

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

站长资讯

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

软件下载

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

建站工具

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

建站教程

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

微擎小程序商城企业响应图片响应式帝国优化as

发布教程
  • 站长首页

  • 源码下载

  • 网站模板

  • 站长素材

  • 网页特效

  • 站长资讯

  • 软件下载

  • 建站工具

  • 建站教程

  • 程序插件

  • 网站基础

  • 帮助中心

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

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

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

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

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

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

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

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

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

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

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

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

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

时间:2018-08-06 23:26 来源:未知 浏览: 次

解决效果如下:

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开始替换,将剩余文本内容替换为"..."
    }
})
上述两种方法作用在文本内容的类名即可。


    好评
    (0)
    0%
    差评
    (1)
    100%
    (作者:80站长网)   /   责任编辑:80站长网
    • 上一篇:HTML页面原生VIDEO标签隐藏下载按钮功能
    • 下一篇:没有了
    • 收藏
    • 打印

    相关模板

  • 绿色低碳环保节能建材类网站源码 绿色环保建材织梦模板

    绿色低碳环保节能建材类织梦模板 绿色环保建材网站 源码下载 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,随便挂点联...

  • 2018-05-14 19:09:30
  • 设备清洗清洁球设备类网站源码 清洗机器设备生产厂家网站织梦模板

    设备清洗清洁球设备类网站 织梦模板 清洗机器设备生产厂家网站源码下载 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,...

  • 2018-05-22 21:56:15
  • 响应式貂绒大衣服装设计生产类网站织梦模板(自适应手机端)

    模板名称: 响应式貂绒大衣服装设计生产类网站 织梦模板 (自适应手机端)+PC+wap+利于SEO优化 模板介绍: 织梦最新内核开发的模板,该模板属于企业通用类、服装设计...

  • 2019-03-13 13:08:10 响应式 貂绒大衣 服装设计
  • 响应式电动自行车踏板车类网站源码 HTML5电动车生产销售企业网站织梦模板

    响应式电动自行车踏板车类网站 织梦模板 HTML5电动车生产销售企业网站 源码下载 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有...

  • 2018-06-09 08:50:01
  • 家用电器网站源码

    家用电器网站源码 智能小家电电器类网站织梦模板 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,随便挂点联盟广告都能...

  • 2017-03-23 15:36:11
  • 包装材料生产线设备类网站源码 包装材料生产企业织梦模板

    包装材料生产线设备类织梦模板 包装材料生产企业网站源码下载 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,随便挂点...

  • 2018-04-25 12:35:14
  • (带手机版数据同步)响应式餐饮牛杂小吃类网站织梦源码 小吃加盟培训类网站模版

    响应式餐饮牛杂小吃类网站 织梦模板 小吃加盟培训类网站模版 源码下载 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,随...

  • 2018-02-27 13:10:29
  • 响应式电脑机箱鼠标键盘配件类网站源码 HTML5电脑硬件配件网站织梦模板

    响应式电脑机箱鼠标键盘配件类网站 织梦模板 HTML5电脑硬件配件网站 源码下载 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利...

  • 2018-06-22 19:14:51

    教程列表

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

    热门教程排行

    • 1 HTML基础教程入门之HTML样式
    • 2 HTML基础知识_编辑器
    • 3 HTML基础教程入门之|HTML标题
    • 4 HTML基础知识_HTML简介
    • 5 HTML基础知识之HTML元素
    • 6 HTML基础教程入门之HTML段落
    • 7 HTML基础教程入门之HTML属性
    • 8 Html基础知识_HTML常用的标签元素
    • 9 html2canvas将html代码转为图片的使用方法
    • 10 html文本溢出显示省略字符的两种常用解决方法

    教程标签

      HTML基础教程 HTML样式
    返回
    顶部
    联系我们 投稿指南 专家专栏 热门标签 广告投放 友情链接

    备案号:辽ICP备16013735号-1 公安备案号辽公网安备 21010402000253号

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

    ×