具有 flex 属性的 div 重叠

Question

我正在使用 angular 和 angular-material 来创建自定义指令。一切都是正确的，除了当我将指令链接函数中的 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

Flex-box 不会打断连续的文本。但是你有一个优雅的解决方案。这样可以避免重叠。

<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/