html - 使 DIV 可扩展

Question

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

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

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

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

Answer 1

您可以使用一些简单的 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 2

如果您只想要 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')
    }
});

见演示。

Answer 3

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

Answer 4

就我个人而言，我发现最好的方法是设置一个最大高度和溢出：自动；。通过这种方式，它可以保持足够小以适合三行，或者轻松扩展到设定的高度以便为段落的其余部分提供适当的住宿。希望这可以帮助。

Answer 5

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

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

正如您确定至少会有一个<h1>（ ps：拥有多个标签不是一个好主意<h1>）并且<p>，我们可以确定高度大约是，比如说100px。

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

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

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

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

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

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

var p = $('.hero-unit p');
var divh = $('.hero-unit').height();
while ($(p).outerHeight() > divh) {
    $(p).text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

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 的解决方案。

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

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

这是演示

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

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