首页 > 其他 > 详细

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

时间:2016-01-15 12:34:35      阅读:263      评论:0      收藏:0      [点我收藏+]

单行溢出:

 

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

  CSS{ width: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!

 

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

原文:http://www.cnblogs.com/cench/p/5132734.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!