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

How to make read more option with html/CSS?

提问by Max_Salah

I have in some divlong 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.

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

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

如何在 html/css 中设置这个“阅读更多”选项？

回答by Rick Hitchcock

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

一种方法是将 div 设置height为其 的三倍line-height，然后设置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>

---

---

您也可以使用 CSS 完全在 CSS 中完成此操作 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>

回答by shankar

You can do this by first setting the height of the box to a specific size and keep the overflow hidden. Then use a button and js event to handle this .

您可以通过首先将框的高度设置为特定大小并保持溢出隐藏来完成此操作。然后使用一个按钮和 js 事件来处理这个。

<div id = "content">
    your test will come here.

    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.

    <button type="button" 
            onclick ="document.getElementById('content').style.height='auto'">
        Read more
    </button>
</div>

Your css file should contain this.

你的 css 文件应该包含这个。

#content {
  overflow: hidden; 
  height: 3em;
  line-height: 1em;
}