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名

  • 相关阅读:
    UE4自学随笔(一)
    经纬度转换度分秒
    IE模式下EasyUI Combobox无效问题
    LayUI加载js无效问题
    C# 使用GDI绘制雷达图
    SQLPrompt8.2 安装之后找不到激活入口
    NetCore3.0 文件上传与大文件上传的限制
    NetCore 下使用 DataTable 以及可视化工具
    docker环境下使用gitlab,gitlab-runner 为 NetCore 持续集成
    QQ浏览器兼容模式下Cookie失效 导致的NetCore Cookie认证失效
  • 原文地址:https://www.cnblogs.com/lightinblack/p/3643814.html
Copyright © 2011-2022 走看看