文本溢出时放置一个按钮

Question

所以说我有一个<div>内部有长文本和定义高度,当文本溢出时我希望...在文本末尾显示div高度,所以这很容易用一点css,但我想要更高级的东西.

我想要的是拥有那个...和一个按钮(Show more),我有点做了,但它是一个非常脏的黑客,我知道应该有更好的解决方案,反正请看看这个小提琴:http://jsfiddle.net/ DgBR2/1 /

基本上我只是在文本顶部浮动另一个白色背景的div,但如果我想要改变文本高度或其他东西,这将在未来产生问题,所以我想要更好的东西.

Answer 1

修订于 11/07/2012

强大的文本溢出滑块

坚固的小提琴

功能：
1. 自动调整字体大小
2. 自动调整“显示更多/显示更少”按钮
3. 轻松更改动画速度
4. 轻松更改“显示更多/显示更少”按钮间距
5. 轻松选择“显示”的哪一侧更多/显示更少的显示打开
6. 轻松设置最初应显示的文本行数

jQuery

//Editable Values

var lines = 5; //Choose how many lines you would like to initially show
var buttonspacing = 7; //Choose Button Spacing
var buttonside = 'right'; //Choose the Side the Button will display on: 'right' or 'left'
var animationspeed = 1000; //Choose Animation Speed (Milliseconds)


//Do not edit below

var lineheight = $('.text').css("line-height").replace("px", "");
startheight = lineheight * lines;
$('.text_container').css({'height' : startheight });

var buttonheight =  $('.button').height();

$('div.container').css({'padding-bottom' : (buttonheight + buttonspacing ) });

if(buttonside == 'right'){
    $('.button').css({'bottom' : (buttonspacing / 2), 'right' : buttonspacing });
}else{
   $('.button').css({'bottom' : (buttonspacing / 2), 'left' : buttonspacing });
}

$('.open').on('click', function(){
        var newheight = $(this).parent('div.container').find('div.text').height();
        $(this).parent('div.container').find('div.text_container').animate({'height' : newheight }, animationspeed );
        $(this).hide().siblings('.close').show();

        });

$('.close').on('click', function(){
    var h = $(this).parent('div.container').find('div.text').height();
    $(this).parent('div.container').find('div.text_container').animate({'height' : startheight }, animationspeed );
    $(this).hide().siblings('.open').show();
    });


$('div.container').each(function(){
    if( $(this).find('div.text').height() >= $(this).find('div.text_container').height() ){
        $(this).find('.button.open').show();

    }
});

超文本标记语言

<div class="container">
    <div class="text_container">
        <div class='text'>

           // Text goes Here

        </div>
     </div>
    <div class='button open'>...Show More</div>
    <div class='button close'>...Show Less</div>
</div>

CSS

.button {position:absolute; z-index:5; display:none; cursor:pointer; color:#555555;}
.close {display:none; }
.open {display:none;}

.container{
    width:200px;
    overflow:hidden;
    border:1px solid #cacaca;
    border-radius:5px;
    font-size:12px;
    position:relative;
    margin:auto;
    padding:10px 10px 0px 10px;
    float:left;
    margin:5px;
}

.text_container{
    height:105px;
    overflow:hidden;

}

.text {}