我有一个项目的列表,这些项目是水平放置的,它们将达到其包含元素的全部宽度,然后它们将在下一行换行。但我想只显示两行项目,然后有一个“显示更多”链接,将显示两个以上的行,直到所有行都显示出来。
这是我的标记看起来像。这很好用,只是我不确定如何只显示前两行。有没有人知道如何做到这一点?我不知道包含元素的宽度(它可以随意拉伸或收缩,如果它这样做了,两行仍然需要适应新的宽度)。
.items {
overflow-y:hidden;
max-height:30px;
}
.item {
border-radius: 3px;
border-style: solid;
border-width: 1px;
cursor: pointer;
display: inline-block;
padding: 0;
text-align: center;
text-decoration: none!important;
vertical-align: middle;
margin-bottom: 10px;
margin-right: 10px;
}
.item-inner {
display: block;
position: relative;
overflow: hidden;
height: 29px;
border-radius: 2px;
}
.item-text {
background-color: transparent;
border: 0;
display: block;
font-size: 13px;
line-height: 29px;
margin: 0;
outline: 0;
padding: 0 10px 0 11px;
text-align: center;
white-space: nowrap;
}
<span class="items">
<span class="item"><span class="item-inner"><span class="item-text">Item 1</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 2</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 3</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 4</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 5</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 6</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 7</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 8</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 9</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 10</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 11</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 12</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 13</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 14</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 15</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 16</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 17</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 18</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 19</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 20</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 21</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 22</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 23</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 24</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 25</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 26</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 27</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 28</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 29</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 30</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 31</span></span></span>
<span class="item"><span class="item-inner"><span class="item-text">Item 32</span></span></span>
</span>
2条答案
按热度按时间ds97pgxw1#
这里有一个简单的方法。
首先在一个div中设置所有的项目,然后在这些项目的上方添加另一个div,表示“显示更多”。
然后添加onclick事件的JS脚本。
这里是最终结果。
pw136qt22#
假设您知道元素的高度,我的答案首先循环遍历这些项,并计算它们将按其top值分组到哪一行。
然后read more按钮将父元素的最大高度设置为元素的高度乘以行号。我还在显示最后一行后隐藏了Read More按钮