Firefox word-break在随机点上打破短语

Question

我是break-word一个容器,所以非常长的单词不会溢出.虽然Chrome和Safari处理得非常好,但似乎Firefox和IE喜欢在最荒谬的点上随机打破单词 - 甚至是短语.请参见下面的屏幕截图:

这是我用来防止破解的代码:

.break-word {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

这是我用于容器和文本的CSS:

.wrap {
position: relative;
text-align: center;
margin: 40px auto 20px;
padding: 50px;
border: 4px double #f7f7f7;
display: block;
}
.quote-text {
font-size: 40px;
line-height: 50px;
font-weight: 400;
}

HTML

   <div class="wrap break-word">
     <div class="row-fluid quotation-marks">&ldquo;&rdquo;</div>
     <span class="quote-text">
       Having a partner definitely allows you to take more risks.
     </span>
     <span class="author">Arianna Huffington</span>
   </div>

为什么会这样？有关如何在所有浏览器中正常使用单词的任何线索？Firefox绝对是一个优先事项.

提前致谢!

Answer 1

你加倍了CSS参数.试试这个..

.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}