Firefox分词功能在任意位置对短词进行分词

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连字的浏览器