如何使用html/CSS制作更多阅读选项？

Question

我有一些div长文本,我想只显示文本中的3行,当有人点击"阅读更多"时,应显示整个文本.

如何在html/css中使这个"阅读更多"选项？

Answer 1

一种方法是将div设置height为其的三倍line-height,然后设置overflow: hidden.

然后,您可以在事件处理程序中将其高度更改为"auto",以显示其余内容:

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('#content').style.height= 'auto';
  this.style.display= 'none';
});
  

body {
  font: 14px verdana;
}

#content {
  overflow: hidden;
  height: 3.6em;
  line-height: 1.2em;
  width: 200px;
}

<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<button>Read more</button>

您也可以使用相邻的兄弟选择器在CSS中完成此操作:

body {
  font: 14px verdana;
}

#content {
  overflow: hidden;
  height: 3.6em;
  line-height: 1.2em;
  width: 200px;
}

#more:checked + div {
  height: auto;
}

<label>
  <input id="more" type="checkbox">Read more
  <div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</label>