Question

让我们采取以下小提琴：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;
}

如何保留省略号，并将蓝色元素放在黄色的左侧？

Answer 1

不幸的是，Flexbox无法正常工作。如果您希望flex项目并排显示，则必须为它们提供适当的flex-basis值，以便在启用包装时允许它们适合Flex容器（flex-shrink在此处不执行任何操作）。

http://jsfiddle.net/wQP8p/2/

.name {
    flex: 1 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: yellow;
}

.extra {
    flex: 1 20%;
    background: blue;
}

如果内容是动态的（即您不知道要设置的实际宽度），则必须在这些元素周围添加包装。

Answer 2

您可以将.extra div放在.name div中，并将display:inline-block;应用于.extra类，如JSFiddle所示。

编辑：这可能不是一种最佳做法，但它似乎可以实现您在审美方面的目标。

如何确保元素不会导致flexbox模型中的换行？

2 个答案: