zoukankan      html  css  js  c++  java
  • HTML文本溢出效果

    【前期准备】① 导入jQuery文件;

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>JS-Lamda-Overflow</title>
        <script type="text/javascript" src="js/jquery-1.7.min.js" ></script>
        <style>
            p{padding: 0;margin: 0;}
            .outer{ 300px;height: 80px;line-height: 20px;overflow: hidden;}
        </style>
    </head>
    <body>
        <div class="outer">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam corporis, 
            	deleniti dolor ducimus error eveniet fuga iusto laborum nisi odio perferendis 
            	reprehenderit sint sit temporibus voluptatibus. Cupiditate exercitationem quis voluptate. 
            	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto consequatur 
            	dolores error facilis illo odio quis repellendus sed temporibus. Adipisci aliquam ea eaque 
            	esse iste nostrum numquam repellendus rerum! </p>
        </div>
    
        <script>
            $(".outer").each(function(i){
                var outerH = $(this).height();
                var $p = $("p", $(this)).eq(0);
                while ($p.outerHeight() > outerH) {
                    $p.text($p.text().replace(/(s)*([a-zA-Z0-9]+|W)(...)?$/, "..."));
                };
            });
        </script>
    </body>
    </html>
    

    效果显示如下:

  • 相关阅读:
    类的创建
    线性规划
    break、continue、pass介绍
    array numpy 模块
    hive字符串函数
    进化的Spark, 从DataFrame说起
    hive sql split 分隔符
    Spark On YARN内存分配
    浅谈Spark应用程序的性能调优
    Spark-Mllib(二)基本统计
  • 原文地址:https://www.cnblogs.com/superdrew/p/9142593.html
Copyright © 2011-2022 走看看