Question

我有一个使用flex的基本布局：

<div class="container">
  <div class="left">LongTextWithNoBreaks...</div>
  <div class="right">Short text</div>
</div>

左侧div用flex-grow: 3定义，右侧用flex-grow: 9定义。通常右边的div是左边的3倍。然而，当我在左边有一个非常长的文本没有空格时，它在chrome中工作得很好，但在FF（35.0.1）中没有那么多。

注意：我正在使用word-wrap: break-word;，因此文字会中断。

完整代码：

  .container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    word-wrap: break-word;
  }
  .left {
    background: gray;
    flex: 3 0 0;
  }
  .right {
    color: #333;
    background: green;
    flex: 9 0 0;
  }

<div class="container">
  <div class="left">
    supercalifragilisticexpialidocious supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious
  </div>
  <div class="right">
    Hello, World!
  </div>
</div>

编辑：我打算在代码段中使用word-wrap，而是使用word-break代替。

注意：使用break-all不是一个好的解决方案，因为它会按字符而不是按字进行。 word-break首先尝试逐字逐句，只在必要时才会在单词中间断开。

Answer 1

看起来FF中缺少的部分是将min-width: 0添加到左侧元素。

  .container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    word-wrap: break-word;
  }
  .left {
    background: gray;
    flex: 3 0 0;
    min-width: 0;
  }
  .right {
    color: #333;
    background: green;
    flex: 9 0 0;
    min-width: 0;
  }

<div class="container">
  <div class="left">
    supercalifragilisticexpialidocious supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious
  </div>
  <div class="right">
    Hello, World!
  </div>
</div>

FF和Chrome之间的Flex和分词不一致行为

1 个答案: