让我们采取以下小提琴:http://jsfiddle.net/wQP8p/
<div class="card">
<div class="preview"></div>
<div class="name">Super Long Title Because I Want To Do It So</div>
<div class="extra">OK</div>
</div>
和CSS
.card {
display: flex;
flex-wrap: wrap;
width: 200px;
}
.preview {
width: 100%;
padding-top: 45%;
background: red;
}
.name {
flex: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: yellow;
}
.extra {
flex: none;
background: blue;
}
如何保留省略号,并将蓝色元素放在黄色的左侧?
答案 0 :(得分:2)
不幸的是,Flexbox无法正常工作。如果您希望flex项目并排显示,则必须为它们提供适当的flex-basis值,以便在启用包装时允许它们适合Flex容器(flex-shrink在此处不执行任何操作)。
.name {
flex: 1 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: yellow;
}
.extra {
flex: 1 20%;
background: blue;
}
如果内容是动态的(即您不知道要设置的实际宽度),则必须在这些元素周围添加包装。
答案 1 :(得分:0)
您可以将.extra
div放在.name
div中,并将display:inline-block;
应用于.extra
类,如JSFiddle所示。
编辑:这可能不是一种最佳做法,但它似乎可以实现您在审美方面的目标。