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

Question

我正在使用flexbox并尝试处理没有空格的长字符串。 可变分word-break: break-word符word-break: break-word对我来说是理想的，因为它与分word-break: break-all符不同word-break: break-all只打破长单词word-break: break-all也会制动短单词，而不是将它们放到下一行。

我的问题是它仅在Chrome中有效。 有没有办法在IE / FIREFOX （使用flexbox）中开始工作 ？

Codepen： 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: flex .item display: flex ，但以下内容将在浏览器中运行：

.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专家可以对此有所启发。

Answer 2

您是否需要display: flex任何特定原因display: flex .item display: flex ？ 如果不是，则word-wrap: break-word行在IE / FF中将执行相同的操作：

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