高于 1 行时 "more..."的 HTML DIV 或 SPAN 标记

Question

是否有 div 或 span 标签或 CSS 会显示“更多...”(如果它们之间的文本高于 1 行)然后允许您单击更多...展开以显示全部？我有一排图标，每个图标下面有一个段落，我只需要显示一行文本(这将根据浏览器的宽度而有所不同)。

Answer 1

这可以做到 -不是很实用，因为它需要正确处理，而且“显示更多”将在文本 block 下方 - 通过使用 :checked 用于 checkbox，但是 checkbox 必须在我们要控制它的高度的段落之前，给 checkbox display:none 并为它制作 label 作为切换 Controller ，就像这样:

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>