Flexbox、空白和省略号

Question

我有一行尝试管理 flexbox，当我减小该行的宽度时，我希望看到 subject 和 的 省略号收件人。

目前，我的代码不能很好地工作，因为我在调整窗口大小时会推送右侧部分。

.row {
  background-color: white;
  border: 1px solid grey;
}

.flex {
  display: flex;
}

.checkbox {
  order: 0;
  padding: 10px;
}

.metadata {
  order: 1;
  flex: 1 1 auto;
  padding: 10px;
  padding-left: 0;
}

.subject, .recipients {
  order: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date, .labels {
  order: 1;
  text-align: right;
  white-space: nowrap;
}

.badge {
  border: 2px solid purple;
  border-radius: 5px;
  color: purple;
  font-weight: bold;
  font-size: 10px;
}

    <div class="row flex">
        <label class="checkbox">
            <input type="checkbox" />
        </label>
        <div class="metadata">
            <div class="flex">
                <a href="#" class="subject">Long long long long long long long subject</a>
                <div class="date">
                    <i class="fa fa-paperclip"></i> 12 fevrier 2016 <a href=""><i class="fa fa-star-o"></i></a>
                </div>
            </div>
            <div class="flex">
                <div class="recipients"><strong>Recipient1, Recipient2, Recipient3</strong></div>
                <div class="labels">
                    <span class="badge">Badge 1</span>
                    <span class="badge">Badge 2</span>
                    <span class="badge">Badge 3</span>
                </div>
            </div>
        </div>
    </div>

Here a JSBin 解决我当前的问题。

Answer 1

只需将flex-wrap: wrap; 应用于您的内部弹性容器。

CSS

.metadata .flex {
  flex-wrap: wrap;
}

这是一个工作示例：

JSFiddle

*旁注：您不需要指定order: 0;，因为在 flex-box 中，order 默认设置为 0。

Answer 2

这是一个干净、现代的解决方案，取决于what you need to support。

display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

把它贴在你的 .subject, .recipients 类上。