文本单行溢出,多行溢出处理方案【...】

单行溢出:

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

  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!

原文地址:https://www.cnblogs.com/cench/p/5132734.html