如何实现父元素内子元素两行排列，并添加省略号按钮显示隐藏内容？

如何在父元素内实现子元素的两行排列？

现有的布局中，子元素需要在父元素内两行排列。同时，超出部分一开始需要隐藏，在父元素容器内显示省略号按钮。点击此按钮后，隐藏部分应出现，并出现横向滚动条。

解决方案

1. 创建父元素容器

   创建一个称为 "container" 的 div，并设置其宽度、高度和边框。将其设为 Initially Hidden。

2. 创建子元素容器

   在 "container" 内创建另一个 div，称为 "flex-container"。设置其宽度和高度，并使用 flexbox 布局使其子元素两行排列。

3. 创建子元素

   在 "flex-container" 内创建所需的子元素，并为其设置样式，使其居中且有背景色。

4. 创建省略号按钮

   

   Cutout.Pro抠图

   AI批量抠图去背景

   下载

   创建另一个 div，称为 "more"，作为一个省略号按钮。对其进行绝对定位，并在点击时显示隐藏的部分。

5. 添加 JavaScript

   使用 JavaScript 监听 "more" 按钮的点击事件。当点击该按钮时，隐藏它并为 "container" 添加一个 "scroll" 类，这将启用横向滚动。

具体代码实现：

HTML：

  

    
item1
    
item2
    
item3
    
item4
    
item5
    
item6
    
item7
    
item8
    
item9
    
item10
    
...
  

CSS：

#container {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}

#container.hidden {
  overflow-x: hidden;
  overflow-y: hidden;
}

#container.scroll {
  overflow-x: scroll;
  overflow-y: hidden;
}

#flex-container {
  width: 800px;
  height: 200px;
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#flex-container .item {
  width: 150px;
  text-align: center;
  background: yellow;
  height: 94px;
  display: flex-item;
}

#more {
  display: block;
  position: absolute;
  top: 160px;
  right: 10px;
  z-index: 5;
  width: 80px;
  height: 30px;
  background: green;
  border-radius: 5px;
  text-align: center;
  color: white;
  cursor: pointer;
}

JavaScript：

document.getElementById("more").onclick = function () {
  this.style.display = "none";
  document.getElementById("container").className = "scroll";
};