如何使用css断开span元素

我有一个容器div，里面有选定的项目和选择输入。

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

要求：

->我需要将所选项目移动到#containerdiv下面，以便在下面一个接一个地显示单个芯片(跨度标签(。

注意：->它里面有一些动态类，我无法修改这些动态类的css类。

不能修改css属性的动态类的列表，_2iA8p44d0WZ和_7ahQImy。

ids/classes列表中，我可以修改css属性为#container和.chip(span(。

我尝试过的东西：

为类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    |

请帮助我修改span标记(.chip)的css，而不修改动态类(我在实际应用程序中无法控制它(以具有换行符，这样它将在容器下面一个接一个地可见。

问题是，你将芯片定位为绝对的，当然，如果你将它们都定位为相同的顶部值，它们最终会叠加在一起。

相反，IMHO在这里更有意义——将输入字段绝对定位在容器的顶部，并使这些芯片处于正常流动状态。为内部容器元素添加一个填充顶部，这样它们就不会在输入字段下面，而是在它下面

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

您可以在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>

相关内容

最新更新

热门标签：