Is there a way to prevent the span tag inside the div with the item class innerHTML from causing a line break, regardless of its length? I also need to ensure that any innerHTML exceeding the item width does not overlap but is hidden. I have attempted using CSS display and overflow properties without success in preventing line breaks. However, I have managed to prevent text overlapping when it exceeds the item width.
#list {
overflow-x: hidden;
overflow-y: scroll;
height: 200px;
width: 200px;
}
.item {
width: 100%;
}
.item-div {
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
.item-span {
overflow: hidden;
}<div id="list">
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item ----------------------------------------------------------------------------------------------------</span>
</div>
<div class="item">
<div class="item-div">
</div>
<span class="item-span">Item</span>
</div>
</div>