zoukankan      html  css  js  c++  java
  • div内文字显示两行,多出的文字用省略号显示

    用-webkit-私有属性,代码如下:
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;


    另外还有其他方法可以解决这个问题:
    1、通过js来控制字数,然后截取文字
    下面是一个例子:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>例子</title>
    <style type="text/css">
    .demo{100px;}
    </style>
    </head>
    <body>
    <div class="demo" id="demo">怎么显示两行或三行文字,然后多出的部分省略号代替?</div>
    <script>
    // js无法直接通过class获取对象,必须自己写一个方法,这样效率会非常低,原生js里最好用id获取,直接用id获取domo对象

    var oBox=document.getElementById('demo');
    // slice() 方法可从已有的数组中返回选定的元素。
    // 您可使用负值从数组的尾部选取元素。
    // 如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
    // 此处需要根据需求自行修改slice()的值,以达到要显示的内容
    var demoHtml = oBox.innerHTML.slice(0,10)+'...';
    // 填充至指定位置
    oBox.innerHTML = demoHtml;
    </script>
    </body>
    </html>

    2、还有一种方法是通过后台控制,用程序控制,程序输出时来控制;这个不会……
  • 相关阅读:
    【从0安装】mysql
    Java面试题整理(待完善)
    Linux部署Java项目
    执行旧命令的几种方法
    SQL Server死锁报错分析
    枚举类中枚举值不存在.valueOf(enum) 抛异常处理
    InitializingBean的项目开发使用
    巧用枚举来干掉if-else,代码更优雅!
    使用Docker安装配置GitLab CE
    批量条件导出之---CSV
  • 原文地址:https://www.cnblogs.com/wangyongx/p/5015469.html
Copyright © 2011-2022 走看看