Question

我有一个div，它包含一个动态填充的段落。有时段落是20行，有时它是3行。

我想设置一个高度限制，如果div大于此值（由于段落中有更多行），它会缩小它以仅显示3行文本然后有一个“查看更多”按钮将根据请求展开和/或折叠div以显示段落中的剩余行。

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>{{paragraph}}</p>
</div>

关于如何尽可能轻松地做到这一点的任何提示？

Answer 1

如果您想要正好3行，请注意这意味着高度应为3*line-height。然后你可以这样做：

<强> HTML

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>...</p>
  <a>More</a>
</div>

<强> CSS

p {
    line-height: 18px;
    height: 54px;
    overflow: hidden;
}

overflow: hidden将隐藏超出容器边界的内容。

<强>的jQuery

然后我们切换高度约束。

$('a').click(function() {
    var p = $('a').prev('p')
    var lineheight = parseInt(p.css('line-height'))
    if (parseInt(p.css('height')) == lineheight*3) {
       p.css('height','auto');
       $(this).text('Less')
    } else {
       p.css('height',lineheight*3+'px');
       $(this).text('More')
    }
});

请参阅demo。

Answer 2

你可以用一些简单的Javascript（不需要jQuery）和一些CSS类来完成。为简化设计，假设设定的最小和最大高度。

演示：

脚本：

document.getElementById( 'slide' ).addEventListener( 'click', function() {
    var body = document.getElementById( 'slide-body' );
    if( body.className == 'expanded' ) {
        body.className = '';
        document.getElementById( 'more' ).textContent = 'more...';
    } else {
        body.className = 'expanded';
        document.getElementById( 'more' ).textContent = 'less...';
    };
} );

HTML：

<div id="slide">
    <div id="slide-body">
    A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. 
    </div>
    <div id="more">more...</div>
</div>

CSS：

#slide {
    border: 1px solid black;
}
#slide-body{
    height: 55px;    
    overflow: hidden;
    transition:             height 500ms ease;
        -moz-transition:    height 500ms ease;
        -ms-transition:     height 500ms ease;
        -o-transition:      height 500ms ease;
        -webkit-transition: height 500ms ease;
}
.expanded {
    height: 150px !important;
}
#more {    
    cursor: pointer;
    text-align: right;
}

Answer 3

您可能想尝试一下adnbutton.com查看代码所做的事情。我想这就是你想要做的。如果您只想在超过3行时执行此操作，则必须使用jQuery等执行此操作。

Answer 4

我个人认为最好的方法是设置max-height和overflow：auto;。通过这种方式，它可以保持小到足以适合三条线，或者可以轻松扩展到设定的高度，以便为段落的其余部分提供适当的调整。希望这会有所帮助。

Answer 5

简单的解决方案是固定高度。

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>{{paragraph}}</p>
</div>

您确定至少有一个<h1>（ ps：拥有多个<h1>代码并不是一个好主意）和{{1} }，我们可以确定高度大约是，<p>。

第一种简单方法是设置固定高度：

100px

这会突然削减内容。如果你需要更好的东西，你可以继续放置一个从透明变为白色的图像。说，像这样：

.hero-unit {height: 100px; overflow: hidden;}

因此，这种技术不会突然切断内容，但会产生平滑的淡入淡出效果。

最后一个将使用插件。您可以选择显示完整内容并提供滚动条，也可以选择在某些用户交互后显示。如果您更喜欢第一个，请转到jScrollPane。或者，如果您更喜欢后者，请选择dotdotdot，或者以下脚本可能会有所帮助：

.hero-unit {height: 100px; overflow: hidden; position: relative;}
.hero-unit img.fade {position: absolute; bottom: 0;}

Answer 6

http://jsfiddle.net/zRjdD/2/

$('.hero-unit').each(function () {
    var ht = $(this).height();
    if (ht > '200') {
        var button = $('<span class="btn">Show all</button>');
        $(this).children('p').css('height', '50px');
        $(this).append(button);
    }
});

$('.btn').on('click', function () {
    $(this).hide();
    $(this).prev('p').css('height', 'auto');
});

Answer 7

这是使用纯javascript，html和css的解决方案。

许多答案的问题是，即使文本小于限制，也会给出最大高度。因此，即使不需要，包含文本的元素也总是具有固定的高度。

此代码在不必要时不使用最大高度参数，即如果文本未超过限制，则它将使用默认高度而不是固定高度呈现文本。仅当文本超出限制时，才会将文本应用于最大高度。同样，只有在需要时才会显示“显示更多”。

以下是demo

<强> HTML

<div class="hero-unit">
  <h1>Product Description</h1>
    <div id='tagList'>this is really long text; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; this is really long text ; 
    </div>   

    <div id="toggleExpandBtn" style = "text-align:right">More</a>
</div>

<强>的Javascript

window.onload = function(){
    var tagList = document.getElementById('tagList')
    var style = window.getComputedStyle(tagList)
    var lineheight = parseInt(style.getPropertyValue('line-height'));
    var height = parseInt(style.getPropertyValue('height'));
    tagList.style.height = 'auto';
    if (height < lineheight*3) {
        document.getElementById('toggleExpandBtn').style.display = 'none';
    }
    else{
        tagList.style.height = lineheight*3 + 'px';
        document.getElementById('toggleExpandBtn').style.display = 'inline';
    }
}

document.getElementById('toggleExpandBtn').addEventListener('click',function(){
     var tagList = document.getElementById('tagList')
     var style = window.getComputedStyle(tagList)
     var lineheight = parseInt(style.getPropertyValue('line-height'));
     var height = parseInt(style.getPropertyValue('height'));
     if (height == lineheight*3) {
        tagList.style.height = 'auto';
        document.getElementById('toggleExpandBtn').textContent = 'Less';
     } else {
        tagList.style.height = lineheight*3 + 'px';
        document.getElementById('toggleExpandBtn').textContent = 'More';
     }
});

<强> CSS

#tagList {
    line-height: 18px;
    overflow: hidden;
}

Answer 8

如果您可以使用bootstrap，请查看bootstrap.javascript.collapse，您将找到并轻松快速解决方案，例如我所做的那样：http://getbootstrap.com/javascript/#collapse < / p>

<div class="collapse" id="collapseExample">
<div class="hero-unit collapse" id="collapseHeroeUnit">
  <h1>Product Description</h1>
  <p>{{paragraph}}</p>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Expand the div
</button>

使DIV可扩展

8 个答案: