• 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、还有一种方法是通过后台控制,用程序控制,程序输出时来控制;这个不会……
  • 相关阅读:
    [NOIP2018]:旅行(数据加强版)(基环树+搜索+乱搞) HEOI
    关于微服务网关
    管理 API 时要问的关键问题
    如何构建成功的微服务架构
    后端老是不写接口文档?说自己很忙?
    Nginx配置文件详解
    Keepalived 高可用
    Jenkins 调用 Shell 脚本
    Supervisor
    Harbor高可用实现基于haproxy
  • 原文地址:https://www.cnblogs.com/wangyongx/p/5015469.html
Copyright © 2020-2023  润新知