断字：断字在 Firefox 和 IE 中不起作用

Question

我正在使用 flexbox 并尝试处理没有空格的长字符串。该变量word-break: break-word对我来说是理想的，因为它只中断长词，不像word-break: break-all刹车也会中断短词，而不是将它们放到下一行。

我的问题是它只适用于 Chrome。有没有办法在 IE / FIREFOX （使用 flexbox）中工作？

代码笔：https ://codepen.io/anon/pen/wqLmoO

.page {
  display: flex;
  justify-content: center;
}

.content {
  display: flex;
  border: 2px solid blue;
  justify-content: center;
}

.item {
  display: flex;
  width: 33vw;
  word-break: break-word;
}

.item_brake_all {
  display: flex;
  width: 33vw;
  word-break: break-all;
}

<p align=center><b><u>Can I get the two top DIVS to display correctly in IE / FIREFOX?</b></u>

  <p align=center>In this div the word should brake:
    <div class="page">


      <div class="content">
        <div class="item">DavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavid</div>

      </div>
    </div>

    <p align=center>In this div no word should brake:
      <div class="page">


        <div class="content">
          <div class="item">In this div the words should not brake because all the words are small. If a specific reaches the end of the container and has no room it should just fall to next line. With 'brake-all' the browser will brake the word like in the example below.</div>

        </div>
      </div>

      <p align=center><b>Example why I dont want to use brake-all:</b>
        <div class="page">


          <div class="content">
            <div class="item_brake_all">In this div the words should not brake because all the words are small. If a specific reaches the end of the container and has no room it should just fall to next line. With 'brake-all' the browser will brake the word.</div>

          </div>
        </div>

Answer 1

虽然我相信您不需要display: flexin .item，但以下内容将适用于浏览器：

.item {
  display: flex;
  flex-direction: column;
  width: 33vw;
  word-break: break-word; /* Chrome, Safari */
  word-wrap: break-word; /* IE11, Firefox */
}

为什么这样做？

简单地说这会flex-direction: column强制 flex 块尊重元素的宽度是幼稚的。解释要复杂得多，我希望一些 CSS 大师可以对此有所了解。