以第二个div获取所需空间的方式对齐两个div。
以第二个div获取所需空间的方式对齐两个div。
提问于 2018-11-17 03:41:41
我有一个容器div，其中有两个div在两端对齐(左和右)。我正在使用flex对齐，如下所示。
.box {
display: flex;
align-items: center;
justify-content: space-between;
width: 232px;
height: 40px;
margin: 0 auto;
background-color: lightblue;
}
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.number {
font-size: 14px;
text-align: right;
background-color: lightblue;
}当两个div没有足够的空间来适应给定的宽度时，我希望右边的div占用它所需的所有空间，而右边的div则收缩(并添加省略号)。然而，在某些情况下，我仍然看到第2 div中的内容转到下一行。有什么可以避免的吗？注意，在jsFiddle中的示例中，“NUMBER”是如何推入下一行的。
http://jsfiddle.net/kLn9bm7w/
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-17 03:48:54
还将white-space: nowrap添加到右边的div (.number)。
.box {
display: flex;
align-items: center;
justify-content: space-between;
width: 232px;
height: 40px;
margin: 0 auto;
background-color: lightblue;
}
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.number {
white-space: nowrap; /* new */
font-size: 14px;
text-align: right;
background-color: lightblue;
}<div class="box">
<div class="name"><a href="#" target="_blank">Somereallylongtextcodssdmeshere</a></div>
<mark class="number">21.0K NUMBER</mark>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53347974
复制相关文章
相似问题
腾讯云开发者
