省略號上Flexbox的孩子

Question

我使用Flexbox的一條線，我有一個孩子，佔用了剩餘寬度：

.flex-container { 
 
    display: flex; 
 
} 
 
.middle { 
 
    flex: 1; 
 
} 
 
.left { 
 
    margin-right: 15px; 
 
} 
 
.right { 
 
    margin-left: 15px; 
 
} 
 
.ellipsis { 
 
    display: inline-block; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="flex-container"> 
 
    <div class="left"> 
 
    Left content 
 
    </div> 
 

 
    <div class="middle"> 
 
    <div>Middle</div> 
 
    <div class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    <span>12345</span> 
 
    </div> 
 

 
    <div class="right"> 
 
    <button class="btn btn-sm btn-danger">Button 1</button> 
 
    <button class="btn btn-sm btn-default">Button 2</button> 
 
    </div> 
 
</div>

我想Lorem存有線截斷並顯示省略。這可能是因爲「中間」元素正在彎曲剩餘寬度嗎？

這裏是一個普拉克： https://plnkr.co/edit/GvyR280i00hnAKHu0keF?p=preview

Answer 1

您只需overflow: hidden在柔性孩子本身。

.flex-container { 
 
    display: flex; 
 
} 
 
.middle { 
 
    flex-grow: 1; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    margin-right: 15px; 
 
} 
 
.right { 
 
    margin-left: 15px; 
 
} 
 
.ellipsis { 
 
    display: inline-block; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="flex-container"> 
 
    <div class="left"> 
 
    Left content 
 
    </div> 
 

 
    <div class="middle"> 
 
    <div>Middle</div> 
 
    <div class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    <span>12345</span> 
 
    </div> 
 

 
    <div class="right"> 
 
    <button class="btn btn-sm btn-danger">Button 1</button> 
 
    <button class="btn btn-sm btn-default">Button 2</button> 
 
    </div> 
 
</div>