javascript HTML水平列表截断为两行

toe95027 于 2023-06-04 发布在 Java

关注(0)|答案(2)|浏览(171)

我有一个项目的列表，这些项目是水平放置的，它们将达到其包含元素的全部宽度，然后它们将在下一行换行。但我想只显示两行项目，然后有一个“显示更多”链接，将显示两个以上的行，直到所有行都显示出来。
这是我的标记看起来像。这很好用，只是我不确定如何只显示前两行。有没有人知道如何做到这一点？我不知道包含元素的宽度（它可以随意拉伸或收缩，如果它这样做了，两行仍然需要适应新的宽度）。

.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>

JavaScript

来源：https://stackoverflow.com/questions/76368935/html-horizontal-list-truncate-to-two-rows

2条答案

按热度按时间

ds97pgxw1#

这里有一个简单的方法。
首先在一个div中设置所有的项目，然后在这些项目的上方添加另一个div，表示“显示更多”。

<div class="container">
    <div class="next" onclick="changeHeight()">
        <span class="nextText">Show more<span>
    </div>
    <span class="item"><span class="item-inner"><span class="item-text">Item 1</span></span></span>
.........
</div>

然后添加onclick事件的JS脚本。

<script>
        function changeHeight(){
            const cont = document.querySelector('.container');
            const divInnerContentHeight = cont.scrollHeight;
            const divClientHeight = cont.clientHeight;
            
            console.log(divInnerContentHeight);
            console.log(divClientHeight);
            
            if(divClientHeight < divInnerContentHeight){
                cont.setAttribute("style",`height:${divClientHeight + 80}px`);
                if(divClientHeight+ 80 >= divInnerContentHeight)
                    document.querySelector('.nextText').innerHTML = "Show less";
            }
            else{
                cont.setAttribute("style",'height:91px');
                document.querySelector('.nextText').innerHTML = "Show more";
            }
        }
    </script>

这里是最终结果。

function changeHeight(){
            const cont = document.querySelector('.container');
            const divInnerContentHeight = cont.scrollHeight;
            const divClientHeight = cont.clientHeight;
            
            //console.log(divInnerContentHeight);
            //console.log(divClientHeight);
            
            if(divClientHeight < divInnerContentHeight){
                cont.setAttribute("style",`height:${divClientHeight + 80}px`);
                if(divClientHeight+ 80 >= divInnerContentHeight)
                    document.querySelector('.nextText').innerHTML = "Show less";
            }
            else{
                cont.setAttribute("style",'height:91px');
                document.querySelector('.nextText').innerHTML = "Show more";
            }
        }

.container{
    width: 50%;
    margin: auto;
    height: 91px;
    overflow: hidden;
    padding-bottom: 18px;
}
.next {
    position: relative;
    top: 100%;
    z-index: 100;
    background-color: #d9cece;
    text-align: center;
}
.next:hover {
    background-color: whitesmoke;
    cursor: pointer;
}
    .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;
}

<div class="container">
    <div class="next" onclick="changeHeight()">
        <span class="nextText">Show more<span>
    </div>
    <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>
</div>

赞(0）回复(0）举报 2023-06-04

pw136qt22#

假设您知道元素的高度，我的答案首先循环遍历这些项，并计算它们将按其top值分组到哪一行。
然后read more按钮将父元素的最大高度设置为元素的高度乘以行号。我还在显示最后一行后隐藏了Read More按钮

function loadReadMore() {
  const items = document.querySelector(".items");
  const allItems = items.querySelectorAll(".items .item");
  const readMore = document.querySelector(".readMore");

  let rows = 0;
  let curTop = 0;
  const maxHeight = 40;
  let row = 1;

  items.style["max-height"] = maxHeight + "px";

  allItems.forEach((el) => {
    let rect = el.getBoundingClientRect();
    el.dataset.height = rect.height + "px";
    if (curTop < el.offsetTop) {
      curTop = el.offsetTop;
      rows++;
    }

    el.dataset.row = rows;
  });

  readMore.addEventListener("click", () => {
    if (row < rows) {
      row++;
      items.style["max-height"] = (maxHeight * row) + "px";

      if (row == rows) {
        readMore.classList.add("hide")
      }
    }
  });
}

window.addEventListener('resize', loadReadMore)
loadReadMore();

.items {
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

.item {
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  padding: 0;
  text-align: center;
  text-decoration: none!important;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 10px;
  display: inline-block;
  
}

.hide {
  display: none;
}

.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;
}

<div 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>
</div>
<button class="readMore">Read More</button>

赞(0）回复(0）举报 2023-06-04

我来回答

javascript HTML水平列表截断为两行

2条答案

相关问题

热门标签

最新问答