码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-01-15 12:37:24      阅读:131      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!