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!

  • 相关阅读:
    Configuration Management
    Android Hooking
    技术趋势总结
    Maven Repo Mirror
    拥抱JAVA
    NPM 更新所有依赖项
    Knockout Mvc Compoment FrameSet With Typescript
    Knockoutjs Component问题汇总
    前端编码规范文档
    优秀程序设计的18大原则
  • 原文地址:https://www.cnblogs.com/cench/p/5132734.html
Copyright © 2011-2022 走看看