省略号上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>