如何使用 css 打断 span 元素？

Question

我有一个容器 div，里面有 selected 项目和 select input。

#container {
  position: relative;
    text-align: left;
    width: 100%;
}

._2iA8p44d0WZ {
  border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 5px;
    min-height: 22px;
    position: relative;
}

._7ahQImy {
  padding: 4px 10px;
    background: #0096fb;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}

<div id="container">
  <div class="_2iA8p44d0WZ">
  <span class="chip _7ahQImy">This is the main label</span>
  <span class="chip _7ahQImy false false">secondary label</span>
  <input type="text" class="searchBox" id="search_input" placeholder="Select" autocomplete="off" value="">
</div>
</div>

要求：

-> 我需要将 selected 项目移动到 #container div 下方以显示在 dividual 芯片（span 标签）下方一个接着一个。

注： -> 里面有一些动态 classes，我无法为那些动态 classes 修改 css classes。

无法修改 css 属性的动态 class 列表，_2iA8p44d0WZ 和 _7ahQImy。

列表ids/classes，我可以修改的css属性是#container和.chip（跨度）。

我尝试过的东西：

为具有 class chip 的 span 元素添加 css 属性如下，

.chip {
  position: absolute;
  top: 200%;
}


.chip:after {
  content: '\A';
  white-space: pre;
}

但这会导致项目相互重叠。

如果我将 display: block; 添加到 .chip 那么结果也是一样的..

#container {
  position: relative;
    text-align: left;
    width: 100%;
}

._2iA8p44d0WZ {
  border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 5px;
    min-height: 22px;
    position: relative;
}

._7ahQImy {
  padding: 4px 10px;
    background: #0096fb;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}

.chip {
  position: absolute;
  top: 200%;
}


.chip:after {
  content: '\A';
  white-space: pre;
}

<div id="container">
  <div class="_2iA8p44d0WZ">
  <span class="chip _7ahQImy">This is the main label</span>
  <span class="chip _7ahQImy false false">secondary label</span>
  <input type="text" class="searchBox" id="search_input" placeholder="Select" autocomplete="off" value="">
</div>
</div>

预期结果：

---------------------------
| Input                   |
---------------------------

| This is the main label |

| secondary label    |

请帮我修改css of span tags (.chip) 而不修改动态classes（我不会在实际应用中控制它）有换行符，这样它就会在容器下面一个接一个地可见。

Answer 1

可以在html br标签中使用，在Css中可以试试

.container{
width: 100px;/*insert the px you need, make som tests*/
}
.your-stuff{
display:flex;
flex-warp: warp;
}

<body>
  <div class="container"> 
     <div class="my-stuff">stuff</div>
  </div>
</body>

Answer 2

问题是你在绝对定位筹码，当然，如果你用相同的最高值定位它们，它们最终会相互重叠。

以另一种方式执行此操作恕我直言在这里更有意义 - 将输入字段绝对放置在容器的顶部，而让这些筹码保持正常流动。为内部容器元素添加一个 padding-top，这样它们就不会在输入字段下方，而是在输入字段下方。

#container {
  position: relative;
    text-align: left;
    width:100%;
}

#container > div {
    padding-top: 2em;
}

._2iA8p44d0WZ {
  border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 5px;
    min-height: 22px;
    position: relative;
}

._7ahQImy {
  padding: 4px 10px;
    background: #0096fb;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}

#search_input {
  position: absolute;
  top: 0;
  left: 0;
}

<div id="container">
  <div class="_2iA8p44d0WZ">
  <span class="chip _7ahQImy">This is the main label</span>
  <span class="chip _7ahQImy false false">secondary label</span>
  <span class="chip _7ahQImy">Another label</span>
  <span class="chip _7ahQImy false false">even more labels labels labels labels labels labels</span>
  <input type="text" class="searchBox" id="search_input" placeholder="Select" autocomplete="off" value="">
</div>
</div>

如何使用 css 打断 span 元素？

How to break span elements using css?

html

css

line-breaks

css-selectors

flexbox