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();

    }
});

<强> HTML

<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 {}

Answer 2

为了使其更加健壮，您可以简单地移除设定高度，而不是设置新的高度。这将使容器成长为其内容的大小。

另外，我建议使用单独的类.collapsed或类似的类，只是切换该类，而不是在某个值和auto之间来回设置CSS高度值。 / p>

这是您编辑过的小提琴：http://jsfiddle.net/DgBR2/9/

新JS：

$(".enlarge").click(function(){
    $(this).siblings('.text').toggleClass('collapsed');   
});

新CSS：

.container{
    width:200px;
    border:1px solid #cacaca;
    font-size:12px;
    position:relative;
    margin:auto;
    padding: 10px 10px 26px;
}

.text.collapsed {
    height: 100px;
    overflow: hidden;
}

.enlarge{
    position:absolute;
    height: 21px;
    bottom: 0;
    left: 0; right: 0; text-align: center;
    color:blue;
}

好的，我正在编辑我的答案以保留动画。这个解决方案有点棘手，涉及三个关键事项：

获取height .collapsed的{{1}}值时，您的元素未折叠，以便您可以在不使用幻数的情况下将元素折叠到所需的高度。您可以通过创建一个新元素并将其赋予.collapsed类，然后检查该新元素（但未呈现）元素的高度来完成此操作。
在展开折叠元素时获取展开元素的完整高度，以便您可以将其设置为新高度 - 因为.animate()不适用于auto值。
在动画完成后删除设置的height值，这样您的文本元素就没有固定的高度，如果您以后更改其内容，它将自动展开/缩小。

这是你的新动画小提琴：http://jsfiddle.net/DgBR2/13/

JS看起来像这样：

$(".enlarge").click(function(){
    var btn = $(this),
        text = btn.siblings('.text'),
        collapsed = text.hasClass('collapsed'),
        // predict the height that the element SHOULD be: its full (scroll) height if it is currently collapsed, or the value of the 'height' CSS property that it will have when collapsed if it is not currently collapsed
        height = collapsed ? text[0].scrollHeight : $('<div>', {'class': 'text collapsed'}).css('height');


    text.animate({'height': height}, 400, function() {
        // do all further changes after the animation completes
       text.toggleClass('collapsed'); // we use this class for our animation logic, so we need to toggle it correctly
       text.css('height', ''); // we don't want the text element to have a fixed height, so remove whatever height we set earlier
       btn.text(collapsed ? 'Show Less' : '...(Show More)');
    });    

});

最后编辑使其更加模块化：从标记中删除扩展器div（因为它们不是语义）并将它们添加到JS中。这种方法还确保1）内容不会溢出的文本容器不会有扩展器按钮2）您可以在添加新文本div或更改现有文本div的内容时正确隐藏/显示扩展器按钮。

我只是简单地描绘了JS，以显示它是如何从上一次迭代中改变的：

// PSEUDOCODE
$(document).ready(function() {
    var addExpander = function() {
            if (this.scrollHeight <= collapsedHeight) {
                // remove expander button if it exists
            } else if (this /* contains no expander button */) {
                // add the expander with its click function
            }
        };

    // call it on all collapsed text divs currently in the document
    $('.text.collapsed').each(addExpander);

    // how to call it again after changing a text div's content:
    addExpander.call(/* your changed div */);
});

工作演示：http://jsfiddle.net/DgBR2/18/

文本溢出时放置一个按钮

2 个答案: