Flexbox的，白的空間和省略號

Question

我有一個排，我嘗試管理Flexbox的，當我降低該行的寬度，我希望看到省略號爲主題和收件人。

目前，我的代碼不能正常工作，因爲當調整窗口大小時，右邊的部分被按下。

.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

這是一個不錯的清潔，現代的解決方案，取決於what you need to support。

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

棍子您.subject，.recipients類。

Answer 2

只需將flex-wrap: wrap;應用於您的內部柔性容器。

CSS

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

這裏是一個工作示例：

JSFiddle

*側面說明：你不需要因爲在柔性框指定order: 0;，爲了默認設置爲0。