Question

我想只显示一个包装文本块的第一行，然后在点击时显示整个块。此外，我想知道如何在第二次点击时将其切换回紧凑的单行版本。

通过css + javascript有一种简单的方法吗？我使用jQuery。

Answer 1

假设您不想使用任何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';
}

或者，如果您想使用jQuery之类的JavaScript框架，则可以为其设置动画。

请参阅： 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);
});

Answer 2

使用CSS + JavaScript可以轻松完成。您只需将div的高度设置为单行的高度，并隐藏所有溢出。然后当用户点击div时，使用一个漂亮的动画处理程序执行一个盲目或其他类似的效果来显示div的全部内容。

这是一个非常基本的例子（没有动画）：http://jsfiddle.net/9Lw6T/

Answer 3

＆＃13;

$(document).on('click', '.collapsible', function () {
  $(this).toggleClass('collapsed');
});

＆＃13;

p {
  cursor: pointer;
}

.collapsed {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

Answer 4

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

这可以进行优化，并且可以使用其中一个常用库

Answer 5

你可以用一些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();        
});

http://jsfiddle.net/jasongennaro/dC32A/

Answer 6

在CSS中将div的大小设置为行的大小（重要的是：您可能需要使用行间距属性在底部用第二行获得适当的填充）。

我不知道点击，但您可以在CSS中使用:hover来更改样式（重置行间距，重置div大小和溢出到正确的值）以获得悬停显示效果。

或者你可以使用JavaScript并在点击时更改CSS（使用jQuery很容易）。

Answer 7

发表评论作为答案：

另一种方法可能是，定义类height: 1em; overflow-y: hidden;，然后使用javascript添加/删除它。

或许您也可以通过将:active包裹在<div>标记中来处理<a> - 伪类，因此不需要javascript。但是在失去焦点的情况下，div会再次崩溃。

Answer 8

这就足够了：

隐藏第一行以外的所有内容：

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' });

Answer 9

将div的隐藏设置为1em，然后在onclick上进行exapnd解决方案。

检查一下。我没有使用任何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";
}

这是小提琴

http://jsfiddle.net/RwM8S/1/

你如何只展示div的第一行文字并展开点击？

9 个答案: