我想在 div 内使用 span 标签,其元素类为 innerHTML,无论其长度如何都不会导致换行。我也不希望超出元素宽度的 innerHTML 重叠但被隐藏。我尝试过使用 CSS display, overflow,但我没有成功阻止任何换行。我已经成功地确保在超出元素宽度时没有文本重叠。
#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>
最佳答案
您正在寻找 white-space: nowrap
在 .item-span
上:
#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 {
white-space: nowrap;
}
<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>
关于css - 有 span 标签 innerHTML 而不是换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55110114/