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

Answer 2

我通过将断字代码更改为：

来进行临时修复

.break-word {
word-break: break-word;
word-wrap: break-word;
}

这些话不再是奇怪的。我不确定这在跨浏览器支持方面有多安全（因为我只测试过最新版本的Chrome，Firefox和Safari）

显然只有en-US显式声明才支持连字符。如果有人有更有效的答案/解释，我很乐意接受你的回答。

Answer 3

删除word-break: break-all。它的意思是它创建了你所描述的确切问题：浏览器被指示随意将单词分解成碎片。

使用word-wrap: break-all更明智（或更不荒谬），因为它告诉浏览器只有在没有其他方法使线条适合可用宽度时才能破解单词。但它也违反了英语和大多数其他语言的规则：在任意点打破一个单词是不正确的。所以也把它带走。

连字符更有意义，但它限制了浏览器支持，并且由于明显的原因，它需要声明文本语言（因为连字规则强烈依赖于语言）。您可以使用基于JavaScript的连字符（例如Hyphenator.js）来处理不支持CSS连字的浏览器

Answer 4

word-break:keep-all;

解决了我的问题