我想只显示包装文本块的第一行，然后在单击时显示整个块。另外，我想知道如何在第二次单击时将其切换回紧凑的单行版本。
有没有简单的方法通过 css + javascript 做到这一点？我使用 jQuery。
【问题讨论】：
height:1em 应该可以显示第一行。对于扩展，我认为 javascript 将是必要的。
标签： javascript jquery css
假设您不想使用任何 JavaScript 库（这是奇怪的）。
HTML：
<div id="content"></div>
CSS：
#content {
border: 1px solid red;
height: 1em;
padding: 2px; /* adjust to taste */
overflow: hidden
}
JavaScript：
document.getElementById("content").onclick = function() {
this.style.height = 'auto';
}
或者，如果您想使用 JavaScript 框架，例如 jQuery，您可以对其进行动画处理。
见：http://jsfiddle.net/JUtcX/2/
$('#content').click(function() {
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);
$(this).animate({height: fullHeight}, 500);
});
【讨论】：
这很容易使用 CSS + JavaScript 完成。您只需要将div的高度设置为单行的高度，并隐藏所有溢出。然后当用户点击 div 时，使用漂亮的动画处理程序来执行遮蔽或其他类似效果以显示 div 的全部内容。
这是一个非常基本的例子（没有动画）：http://jsfiddle.net/9Lw6T/
【讨论】：
$(".expander").click(function() { $(this).toggleClass("expander"); });
$(document).on('click', '.collapsible', function () {
$(this).toggleClass('collapsed');
});p {
cursor: pointer;
}
.collapsed {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>【讨论】：
<div id='a' onclick='toggletext'>first line<br /></div>
function toggletext(){
var html= document.getElementById('a').innerHTML;
if(html=='first line<br />'){
html = 'first line<br />next lines<br />next lines<br />';
}else{
html = 'first line<br />';
}
document.getElementById('a').innerHTML = html
}
这可以被优化并且可以使用公共库之一
【讨论】：
你可以用一些 jQuery 来做到这一点。
<div id="a">
<span id="first">This is the first line (read more)</span>
<br />
<span id="rest">This is the rest of the text</span>
</div>
脚本
$('#rest').hide();
$('#first').click(function(){
$('#rest').show();
});
【讨论】：
在 CSS 中将 div 的大小设置为行的大小（重要：您可能需要使用行间距属性来在第二行的底部获得适当的填充）。
我不知道点击，但是你可以在 CSS 中使用:hover 来改变样式（重置行距、重置 div 大小和溢出到适当的值）以获得悬停显示效果。
或者您可以使用 JavaScript 并在点击时更改 CSS（使用 jQuery 很容易做到）。
【讨论】：
发表我的评论作为答案：
另一种方法可能是，定义类 height: 1em; overflow-y: hidden;，然后在点击时使用 javascript 添加/删除它。
或者你也可以在:active-pseudo-class 中处理它，方法是用<div> 包装你的<a>-标签，这样就不需要javascript。但随后 div 会因失去焦点而再次崩溃。
【讨论】：
这就足够了：
隐藏除第一行以外的所有内容：
var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'hidden';
theDiv.style.height = '1em';
显示所有文本：
var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'visible';
theDiv.style.height = 'auto';
或者，如果您要使用 jQuery：
$('#theDiv').css({ height: '1em', overflowY: 'hidden' });
$('#theDiv').css({ height: 'auto', overflowY: 'visible' });
【讨论】：
将 div 的隐藏设置为 1em，然后单击展开即可解决。
检查这个。我没有使用任何 JS 库。
CSS
.expandable{
height:1.2em;
overflow:hidden;
}
HTML
<div class="expandable" onclick="expand(this)">Your text here</div>
JS
window.expand = function(el) {
el.style.height = "auto";
}
这是小提琴
【讨论】：