zoukankan      html  css  js  c++  java
  • 控制文本长度

    这几天写页面的时候有一个需求:规定一个容器的宽和高,里面的文字,超出部分显示省略号。收索和求救后将代码和大家一起分享

    在网上看到一个:

    <script type="text/javascript">
        (function(){
            var txt = 50;//设置留下的字数
            var o = document.getElementById("cla");//id   html 中设置
            var s = o.innerHTML;
            var p = document.createElement("span");
            var n = document.createElement("font");
            p.innerHTML = s.substring(0,txt);
            n.innerHTML = s.length > txt ? "..." : "";
            o.innerHTML = "";
            o.appendChild(p);
            o.appendChild(n);
        })();
    </script>

    后来群里面一大神稀饭发了一个demo给我参考:

    <!DOCTYPE html>
    <html>
        <meta charset="utf-8"/>
        <head>
            <title>demo</title>
        </head>
    <style type="text/css" media="screen">
        ul { 200px}    
        li { list-style: none; margin:20px;}
        </style>
        <body>
            <ul>
                <li class="aaa">成思危表示,中国的房地产模式以及中国城镇化进程的推进,决定了房地产业未来走势。</li>
                <li class="aaa">成思危表示,中国的房地产模式以及中国城镇化进程的推进,决定了房地产业未来走势。不过他也表示,</li>
                <li class="aaa">成思危表示,中国的房地产模式以及中国城镇化进程的推进,决定了房地产业未来走势。不过他也表示,有些地方房地产价</li>
                <li class="aaa">成思危表示,中国的房地产模式以及中国城镇化进程的推进,决定了房地产业未来走势。不过他也表示,</li>
            </ul>
            <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
            <script>
    $(document).ready(function(){
    $('.aaa').each(function(){//这边也可以直接用li之类的标签
    var maxLength=25;
    if($(this).text().length>maxLength){
    $(this).text($(this).text().substring(0,maxLength));
    $(this).html($(this).html()+'…');
    }
    });
    });
            </script>
        </body>
    </html>

    稀饭大神这个代码经测试ie9以上,ff,chroom均通过。原生js代码在ie,ff,chroom下均通过,但我不知道怎么换成class名

  • 相关阅读:
    Arrays类总结
    多维数组
    数组
    写一个计算器,要求实现加减乘除功能,能够循环接收收据,通过用户交互实现
    递归
    方法
    函数
    流程控制
    mysql笔记(连接与子查询部分)
    ubuntu下mysql的常用命令
  • 原文地址:https://www.cnblogs.com/lightinblack/p/3643814.html
Copyright © 2011-2022 走看看