zoukankan      html  css  js  c++  java
  • 文本单行溢出,多行溢出处理方案【...】

    单行溢出:

      单行文本中文字超过固定宽高后显示...

      CSS{ 500px;height:30px;overflow:hide;text-overflow: ellipsis;white-space: nowrap;}

        宽度和高度必须固定

    多行溢出:

      处理多行溢出,考虑兼容性问题,个人认为采用JS来解决最直接了当

    HTML:

    <div class="word">
        <p>这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字这是一段将会多行溢出的文字</p>
    </div>

    CSS:

    .word{
      width:500px;
      height:200px;
      overflow:hidden;
      text-align:justify;    
    }

    /* 同样宽度和高度必须固定 */

    JS:

    $('.word').each(function(){
    
        var h = $(this).height();
        var p = $("p",$(this)).eq(0));
    
        while( p.outerHeight() > h ){
            p.text( p.text().replace(/ (s)*([a-zA-Z0-9]+|w)(...)?$/,"..." ) )
        }
    
    })

    可以兼容各种浏览器,需引用Jquery!

  • 相关阅读:
    BIEE变量总结
    微信支付回调问题
    内网搭建WEB服务器教程(转载)
    c#简体繁体转换
    js页面之间函数调用
    数据库性能优化一:SQL索引一步到位
    EasyUI兼容IE问题
    SQL函数说明大全
    经典SQL语句大全(绝对的经典)
    Sql Server 常用系统存储过程大全
  • 原文地址:https://www.cnblogs.com/cench/p/5132734.html
Copyright © 2011-2022 走看看