7

所以说我有一个<div>里面有一个长文本并定义了高度，当文本溢出那个 div 高度时，我想...在文本的末尾显示，所以这很容易用一点 css，但我想要更高级的东西。

我想要的是拥有那个...和一个按钮(Show more)，我做到了，但这是一个相当肮脏的黑客，我知道应该有更好的解决方案，无论如何请看看这个小提琴：http: //jsfiddle.net/ DgBR2/1/

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

4

2 回答 2

3

2012 年 11 月 7 日修订

强大的文本溢出滑块

健壮的小提琴

特点：
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 {}
于 2012-11-06T21:20:12.107 回答
1

为了使其更健壮，您可以简单地删除设置的高度，而不是设置新的高度。这将允许容器增长到它的内容有多大。

另外，我建议使用类似.collapsed或类似的单独类，并且只是切换该类，而不是在某个值和auto.

这是您编辑的小提琴：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;
}

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

  1. 当你的元素没有折叠时获取 -classed 元素的height值.collapsed，这样你就可以在不使用幻数的情况下将元素折叠到所需的高度。为此，您可以创建一个新元素并为其指定.collapsed类，然后检查该新（但未渲染）元素的高度。

  2. 在折叠时获取展开元素的完整高度，以便您可以将其动画到新高度 - 因为.animate()不适用于该auto值。

  3. 动画完成后删除设置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/

于 2012-11-06T21:34:48.287 回答