具有 flex 属性 重叠的 Div

Question

我正在使用 angular 和 angular-material 创建自定义指令。一切都是正确的，除了当我在指令 link 函数中将 flex 属性添加到一个 div 时，内容会重叠。

示例：

http://jsfiddle.net/9crdbz4t/

<div layout="row">
    <div flex=10>example.long.email@example.com.zzz</div>
    <div flex>Some other text that require more space</div>
</div>

如果内容大于 flex 值，我如何调整内容？

Answer 1

弹性框不会打断连续的文本。但是你在这里有一个优雅的解决方案。这样就可以避免重叠。

<div flex layout="row" >
    <div flex="10" style="text-overflow: ellipsis;overflow: hidden;">example.long.email@example.com.zzz</div>
    <div flex >Some other text that require more space</div>
</div>

或者您可以直接使用 word-wrap: break-word;。

<div  layout="row" >
        <div flex="10" style="word-wrap: break-word;">example.long.email@example.com.zzz</div>
        <div flex >Some other text that require more space</div>
    </div>

http://jsfiddle.net/9crdbz4t/13/