如何使用动态宽度（flex：1）使flex项目的省略号工作？

我试图在flex:1; div上执行white-space: nowrap;和text-overflow: ellipsis;而不设置max-width。我希望它调整到宽度flex:1给出。如何使用动态宽度（flex：1）使flex项目的省略号工作？

这里是一个小提琴，说明我想要什么，到底发生了什么： https://jsfiddle.net/dani3l/6y04bvu1/13/

我想只保留如果可能的解决CSS。

在此先感谢！

来源

2016-02-09 sUP

相关 - http://stackoverflow.com/questions/31329835/css-fit-content-div-to-remaining-space/33228704#33228704 –

-1

要应用文本溢出：省略号，您必须给出宽度或最大宽度，否则它不知道它需要停止的位置。

来源

2016-02-09 12:45:11

所以我想我必须用js来计算元素宽度并设置max在飞行中的宽度。 – sUP

是的。你可以用js计算出你的宽度是否取决于其他因素。 –

你可以在你的Flex试试这个：1类：

.flex-1, .flex-1 > * { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

这里是显示这个片段。

.flex-container { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 50px; 
 
    width: 120px; 
 
    padding: 0 10px; 
 
    background-color: black; 
 
} 
 

 
.flex-1 { 
 
    flex: 1; 
 
    color: white; 
 
} 
 

 
.flex-1, .flex-1 > * { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="flex-container"> 
 
    <div class="flex-1"> 
 
    This is very long text. 
 
    </div> 
 
</div> 
 

 

 
<br> 
 
<br> 
 

 
<div class="flex-container"> 
 
    <div class="flex-1"> 
 
    <div> 
 
     Child divs work too 
 
    </div> 
 
    <br /> 
 
    <span> 
 
     Child spans work too 
 
    </span> 
 
    </div> 
 
</div>

我发现Larry Gordon's Codepen，帮助我与此有关。

来源

2016-07-28 20:53:56

如何使用动态宽度（flex：1）使flex项目的省略号工作？

回答

相关问题