How to break span elements using css? - html

Question

I am having a container div with selected items and select input inside it.
#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>
Requirement:
-> I am in the need to move the selected items below the #container div to display individual chips (span tags) below one after the other.
Note:
-> There are some dynamic classes inside it for which I cannot modify the css classes for those dynamic classes.
List of dynamic classes for which css properties cannot be modified, _2iA8p44d0WZ and _7ahQImy .
List of ids/classes, I can modify the css properties are #container and .chip (span).
Things I have tried:
Added css property for span element with class chip as follows,
.chip {
position: absolute;
top: 200%;
}
.chip:after {
content: '\A';
white-space: pre;
}
But this results in the overlapping of items one on another.
If I add display: block; to .chip then that also results the same..
#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>
Expected Result:
---------------------------
| Input |
---------------------------
| This is the main label |
| secondary label |
Kindly please help me to modify the css of span tags (.chip) without modifying the dynamic classes (I don't have control for it in real application) to have line breaks, so that it will be visible one after the other below the container.

Answer 1

The problem is that you are positioning the chips absolute, of course they will end up on top of each other, if you position them all with the same top value.
Doing this the other way around would IMHO make much more sense here - position the input field absolute at the top of the container, and leave those chips in normal flow instead. Add a padding-top for the inner container element, so that they don’t go beneath the input field, but under it.
#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>

Answer 2

You can use in html br tag, in Css you can try
.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>