用于"更多..."的HTML DIV或SPAN标记当高于1行时

时间:2016-01-20 22:07:09

标签: html css

是否有divspan标记或CSS会显示"更多..."如果文本之间的文本高于1行,然后允许您单击更多...以展开以显示所有?我有一行图标,每个图标下面都有一个段落,我只需要显示一行文本(根据浏览器宽度的不同而不同)。

1 个答案:

答案 0 :(得分:2)

可以这样做 - 不太实用,因为它需要正确处理,而且“显示更多”将位于文本块之下 - 通过使用:checked对于checkboxcheckbox必须在我们想要控制它的高度的段落之前,给出checkbox display:none并为其label作为切换控制器,就像这样:

JS Fiddle

.para{
  max-height:20px;
  overflow:hidden; /* needed to hide the rest of the content */
  transition:all 1s;
}
.chk{
  display:none; /* hide the checkbox */
}

/* if the checkboxed is checked, we show the following .para div by
   increasing the max height property 
*/
.chk:checked ~ .para{
  max-height:500px;
  transition:all 1s;
}

/* change the text to "Show Less" if the full text is shown */
.chk:checked ~ .lbl::after{
  content:'Show Less';
}
.lbl{
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}

/* by default the text is "Show More" as long as the checkbox is not checked*/
.lbl::after{
  content:'Show More';
}
<div class="container">
  <input type="checkbox" id="chkbx1" class="chk">
  <div class="para">
    Fruitcake toffee oat cake cheesecake chocolate sesame snaps. Cookie topping pie powder croissant gummies. Biscuit gingerbread toffee chocolate cake cupcake. Sesame snaps marzipan pudding chupa chups candy croissant chocolate dragée. Jelly-o bonbon gummies jelly ice cream tiramisu bonbon. Cake candy apple pie fruitcake wafer fruitcake. Tart gummies cake.
  </div>
  <label for="chkbx1" class="lbl"></label>
</div>