zoukankan      html  css  js  c++  java
  • 使用插件实现某元素展示特定行文字,超出显示...

    文字超出显示...这种用法还是很常见的,最方便的写法是直接用css方法,具体写法见另一篇随笔:https://www.cnblogs.com/sherryweb/p/12759807.html

    然而这种css写法,IE浏览器好多时候是不识别的,那么就可以使用一些插件来实现:

    如:clamp.js    连接:https://github.com/josephschmitt/Clamp.js/blob/master/clamp.js

    demo如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Clamp.js Example 1</title>
    </head>
    <body>
        <style>
            body {
                width: 300px;
            }
        </style>
        <h1>Curabitur magna lectus, cursus at euismod sed, aliquet a lectus. Vivamus ac magna purus, in eleifend eros.</h1>
        <div>
            <p>Quisque pellentesque dui sit amet nisl sollicitudin faucibus. Ut est mauris, vestibulum ullamcorper feugiat consectetur, ullamcorper eu lorem. Mauris congue convallis felis sit amet scelerisque. Etiam sed sodales orci. Ut porta massa commodo turpis dictum suscipit. Quisque sit amet metus eget arcu lacinia pellentesque. Aliquam aliquam tortor nec odio tempus non pharetra ipsum ultricies. Aenean pretium tristique orci vitae tempus. Sed vitae quam ut felis aliquam blandit nec et odio. Mauris at magna odio, at mattis risus. Phasellus eu enim mi, sit amet hendrerit est. Integer egestas consectetur blandit. Etiam odio nibh, fermentum non venenatis nec, dictum vel ligula. Quisque rutrum imperdiet arcu at ultricies. Integer in diam ut elit euismod posuere et id sapien. Cras ligula leo, hendrerit vitae sagittis nec, commodo sed lacus. In aliquam pretium mauris sed ullamcorper. Phasellus fermentum iaculis massa ac condimentum. Ut nisl turpis, vulputate in rhoncus sed,</p>
            <ul><li>elementum eget</li><li>massa. Sed a diam</li><li>dui, in <a href="#">iaculis felis.</a></li></ul>
        </div>
        <script src="../clamp.js"></script>
        <script>
            var header = document.getElementsByTagName('body')[0].getElementsByTagName('h1')[0],
                paragraph = document.getElementsByTagName('body')[0].getElementsByTagName('div')[0];
                
            $clamp(header, {clamp: 1, useNativeClamp: false});
            $clamp(paragraph, {clamp: 10, useNativeClamp: false, animate: true});
        </script>
    </body>
    </html>

    demo来源:https://github.com/josephschmitt/Clamp.js

    如果不考虑IE10以下的浏览器,可以用另一种css方法来实现兼容:(IE10以下不识别)

    .line-clamp{
      font-size: 14px;
      color: #333;
      overflow: hidden;
      line-height: 30px;
      position: relative;
      height: 60px;
    }
    .line-clamp:after {
      content: '...';
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
       10%;
      height: 1.8em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    }

    这里的后面...的背景色是白色渐变,可根据实际情况修改颜色
  • 相关阅读:
    MYSQL函数 Cast和convert的用法详解
    MySQL5.7.9(GA)的安装
    TMS Scripter importtool的使用
    MySQL 高可用架构在业务层面的应用分析
    UNIGUI:How to redirect and close session?
    HTML URL 编码:请参阅:http://www.w3school.com.cn/tags/html_ref_urlencode.html
    js 解决函数加载的问题
    必备函数
    Action 分离
    JavaScript.Remove
  • 原文地址:https://www.cnblogs.com/sherryweb/p/13303775.html
Copyright © 2011-2022 走看看