我在父div中有一系列div作为列,设置为隐藏溢出,但是当到达容器的右侧而不是溢出时,列会换行。
这是代码的基本版本。
.column{
width:200px;
float:left;
}
<div style="overflow:hidden">
<div class="column"></div>
<div class="column"></div>
</div>
答案 0 :(得分:1)
你应该使用inline-block而不是float:left;
.container { width: 300px; overflow: scroll; white-space: nowrap; }
.column{
background-color: red;
width:200px;
height: 200px;
display: inline-block;
}
使用HTML:
<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
答案 1 :(得分:1)
尝试
div.column {
white-space: nowrap;
overflow-x: hidden;
width: 200px;
}
这将隐藏任何溢出,并强制文本不换行,将它全部保存在一行上。
对于较新的浏览器,CSS支持ellipsis
text-overflow
的{{1}}属性,以增添良好的触感。