Question

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

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

Codepen：https://codepen.io/anon/pen/wqLmoO

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

虽然我确信您display: flex中不需要.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专家能够对这一点有所了解。

Answer 2

display: flex中您需要.item的具体原因吗？如果没有，那么word-wrap: break-word将在IE / FF中执行相同的操作：

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

word-break：破解词在Firefox和IE

2 个答案: