javascript - 如何从底部显示Div的部分内容？

Question

我想以这样的方式显示 div 的内容，使其仅显示最后 3 个列表项，其余内容将被隐藏。

.wrapper {
height : 100px;
overflow:hidden;
}

<div class="wrapper">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Vestibulum eu ipsum at lectus rutrum interdum.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>bottom Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>bottom Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>bottom Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
  </ul>
</div>

我尝试应用 height 属性，但它将应用于顶部内容而不是底部内容。

Answer 1

您可以使用 css 来做到这一点。 nth-last-child(-n+3) 将定位最后 3 个元素。

li{
  display:none
}

li:nth-last-child(-n+3) {
  display:list-item;
}

<小时/>

对于 div，您还可以使用相同的 CSS，只需稍作调整。假设父div有一个主类

.main div{
  display:none;
}

.main div:nth-last-child(-n+3) {
  display:block;
}

工作代码

li {
  display: none
}

li:nth-last-child(-n+3) {
  display: list-item;
}

.main div {
  display: none;
}

.main div:nth-last-child(-n+3) {
  display: block;
}

<div class="wrapper">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Vestibulum eu ipsum at lectus rutrum interdum.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>bottom Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>bottom Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>bottom Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
  </ul>
</div>



<div class='main'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>

</div>