如何使阅读更多的选项与html / CSS？ [英] How to make read more option with html/CSS?

问题描述

我有一些 div 长文本，我想显示从文本只有3行，当有人点击阅读更多，整个文本应该显示。

如何在html / css中创建此阅读更多选项？

解决方案

一种方法是将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 ：隐藏身高：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。 < / div>< button>阅读更多< / button>  

---

您也可以使用相邻同级选择器：

  body {font：14px verdana;}＃content {overflow：hidden;身高：3.6em; line-height：1.2em; width：200px;}＃more：checked + div {height：auto;}  

 < label> < input id =moretype =checkbox>阅读更多< 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。除非另有规定，否则不在意，不可抗力。 < / div>< / label>  

I have in some div long text and I would like to display only 3 lines from the text and when somebody click on the "read more", the whole text should be shown.

How to make this "read more" option in html/css?

解决方案

One method would be to set the div's height to be three times its line-height, and set overflow: hidden.

You can then change its height to "auto" in the event handler for displaying the rest of the content:

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>

---

You could also do this completely in CSS by using an adjacent sibling selector:

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>

这篇关于如何使阅读更多的选项与html / CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！