twitter-bootstrap 使 DIV 可扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14969933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a DIV expandable
提问by user1328021
I have a div and it contains a paragraph that is populated dynamically. Sometimes the paragraph is 20 lines, and sometimes it is 3.
我有一个 div，它包含一个动态填充的段落。有时段落是 20 行，有时是 3 行。
I want to set a height limit upon which if the div is larger than this (due to there being more lines in the paragraph) it will shrink it down to only show 3 lines of text and then have a "View More" button that will expand and/or collapse the div upon request to show the remaining lines in the paragraph.
我想设置一个高度限制，如果 div 大于这个（由于段落中有更多行），它将缩小它以仅显示 3 行文本，然后有一个“查看更多”按钮根据要求展开和/或折叠 div 以显示段落中的其余行。
<div class="hero-unit">
<h1>Product Description</h1>
<p>{{paragraph}}</p>
</div>
Any tips on how I can do this as easily as possible?
关于如何尽可能轻松地做到这一点的任何提示？
回答by ThinkingStiff
You can do this with some simple Javascript (no jQuery needed) and some CSS classes. To simplify design, assume a set min and max height.
您可以使用一些简单的 Javascript（不需要 jQuery）和一些 CSS 类来做到这一点。为了简化设计，假设设置了最小和最大高度。
Demo:
演示：
Script:
脚本：
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:
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:
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;
}
回答by melhosseiny
If you want exactly 3 lines, notice that this means that the height should be 3*line-height. You could then do this:
如果您只需要 3 行，请注意这意味着高度应为3*line-height. 然后你可以这样做：
HTML
HTML
<div class="hero-unit">
<h1>Product Description</h1>
<p>...</p>
<a>More</a>
</div>
CSS
CSS
p {
line-height: 18px;
height: 54px;
overflow: hidden;
}
overflow: hiddenwill hide content that exceed the container boundaries.
overflow: hidden将隐藏超出容器边界的内容。
jQuery
jQuery
We then toggle the height constraint.
然后我们切换高度约束。
$('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')
}
});
See demo.
见演示。
回答by Pratik Patel
Here is the solution that uses pure javascript, html and css.
这是使用纯 javascript、html 和 css 的解决方案。
Problem with many answers is that even if the text is less than the limit, it is given the maximum height. Thus the element containing text will always have the fixed height, even when not required.
许多答案的问题是，即使文本小于限制，也会给出最大高度。因此，包含文本的元素将始终具有固定的高度，即使在不需要时也是如此。
This code does not use the maximum height parameter when not necessary i.e. if the text is not exceeding the limit then it renders text with default height and not the fixed height. The text is applied the maximum height only when text exceeds the limit. Similarly, the "show more" is displayed only when required.
此代码在不必要时不使用最大高度参数，即，如果文本未超过限制，则它以默认高度而不是固定高度呈现文本。仅当文本超过限制时才应用最大高度。同样，“显示更多”仅在需要时显示。
Here is the demo
这是演示
HTML
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
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
CSS
#tagList {
line-height: 18px;
overflow: hidden;
}
回答by tremendows
If you're available to use bootstrap, take a look at bootstrap.javascript.collapse and you'll find and easy fast solution like the one I've wroten: http://getbootstrap.com/javascript/#collapse
如果您可以使用 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>
回答by StackExchange User
You might want to try something along the lines of what adnbutton.com did to view the code. I think that's what you want to do. If you only want to do this when there is more than 3 lines, you'd have to do this with jQuery or the like.
您可能想尝试按照 adnbutton.com 所做的操作来查看代码。我认为这就是你想要做的。如果您只想在超过 3 行的情况下执行此操作，则必须使用 jQuery 等来执行此操作。
回答by PhazingAzrael
Personally I find the best method is to set a max-height and overflow:auto;. This way it keeps it small enough to just fit the three lines, or easily expand to a set height to have proper accommodation for the rest of the paragraph. Hope this helps.
我个人认为最好的方法是设置最大高度和溢出：自动；。通过这种方式，它可以保持足够小以适合三行，或者轻松扩展到设定的高度，以便为段落的其余部分提供适当的调整。希望这可以帮助。
回答by Praveen Kumar Purushothaman
The simple solution would be having a fixed height.
简单的解决方案是具有固定的高度。
<div class="hero-unit">
<h1>Product Description</h1>
<p>{{paragraph}}</p>
</div>
As you are sure that there will be at least one <h1>(ps: it is not a good idea to have multiple <h1>tags) and <p>, we can be sure of the height would be roughly about, say 100px.
由于您确定至少会有一个<h1>（ps：拥有多个<h1>标签不是一个好主意），并且<p>我们可以确定高度大约为100px。
The first simple way would be setting a fixed height:
第一个简单的方法是设置一个固定的高度：
.hero-unit {height: 100px; overflow: hidden;}
This would abruptly cut the contents. If you need something better, you can go ahead with placing an image, which fades from transparent to white. Say, something like this:
这会突然削减内容。如果你需要更好的东西，你可以继续放置一个图像，它从透明变为白色。说，像这样：
.hero-unit {height: 100px; overflow: hidden; position: relative;}
.hero-unit img.fade {position: absolute; bottom: 0;}
So, this technique will not cut the contents abruptly, but will give a smooth fade effect.
因此，这种技术不会突然剪切内容，而是会产生平滑的淡入淡出效果。
The final one would be using plugins. You can choose either you show the full content and give a scrollbar, or showing it after some user interactions. If you prefer the first one, go for jScrollPane. Or, if you prefer the latter, go for either dotdotdot, or the below script might help:
最后一个将使用插件。您可以选择显示完整内容并提供滚动条，或在一些用户交互后显示。如果您更喜欢第一个，请选择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)*$/, '...');
});
}
回答by isherwood
$('.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');
});
