在 div 中显示“显示更多”按钮而不是垂直滚动条

Question

我有一个固定高度的 div，其中包含一些 html 内容。当这个高度溢出时，我不希望出现滚动条，而是在 div 的底部出现一个按钮。只有当你按下这个按钮时，所有的内容都应该显示出来，显然滚动条会自动显示出来。我知道有一个名为“溢出”的属性，您可以使用“滚动”值，但在用户按下按钮之前我不需要滚动条。请注意，如果没有发生溢出，则应该没有按钮。

---------------div starts-----------------
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT    

    [SHOW MORE BUTTON ]

---------------div ends-----------------

如果没有 jquery，你将如何实现它？用javascript怎么感觉内容会溢出？

Answer 1

您只能使用 css 来实现这一点（使用 checkbox 和 :checked 状态）。

如果有什么不清楚的地方请告诉我。

注意：max-height:500px; 只是一个例子。如果内容假设更高，请使用此值。

input[type="checkbox"] {
  display: none;
}

label {
  color: blue;
  text-decoration: underline;
  margin-top: 10px;
  cursor: pointer;
  display: inline-block;
}

label:after {
  content: "more";
}

input:checked~label:after {
  content: "less";
}

.inner {
  max-height: 100px;
  overflow: hidden;
  transition: all .3s ease;
  width: 100px;
}

input:checked+.inner {
  max-height: 500px;
}

<div class="outer">
  <input type="checkbox" id="readmore" />
  <div class="inner">
    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
  </div>
  <label for="readmore">Read </label>
</div>