• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML超出文本多行截取实现原理及代码
    HTML超出文本多行截取代码如下:

    HTML:

    复制代码
    代码如下:

    <div class="sytm-text-1">
    <p>
    脚本之家 网址:https://www.jb51.net
    </p>
    </div>
    <div class="sytm-text-2">
    <p>
    脚本之家 网址:https://www.jb51.net
    </p>
    </div>

    CSS:

    复制代码
    代码如下:

    .sytm-text-1 {
    color: #FFF;
    background: #000;
    width: 410px;
    height: 22px;
    }
    .sytm-text-2 {
    color: #FFF;
    background: #000;
    width: 410px;
    height: 44px;
    }
    p {
    line-height: 22px;
    }

    JS(引入jQuery):

    复制代码
    代码如下:

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

    通过上述代码可以发现,实现这个效果的主要原理在于通过子容器(p)与父容器(div)高度的比较根据正则表达式进行字符截取,直到两者相等为止。所以控制截取行数的关键自然在div高度上了。
    上一篇:html标签默认样式整理
    下一篇:html之简单网页表格制作示例介绍
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML超出文本多行截取实现原理及代码 HTML,超出,文本多,文,本多,