9

我正在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 绝对是一个优先事项。

提前致谢！

4

4 回答 4

20

您正在加倍使用 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;
}
于 2013-01-07T06:41:09.070 回答
4

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

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

话不再奇怪地断断续续。我只是不确定这在跨浏览器支持方面有多安全（因为我只用最新版本的 Chrome、Firefox 和 Safari 进行了测试）

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

于 2013-01-07T06:29:56.453 回答
4

删除word-break: break-all. 它的含义是它创建了您所描述的确切问题：指示浏览器将单词随意分解。

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

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

于 2013-01-07T08:57:06.167 回答
0 
word-break:keep-all;

为我解决了问题

于 2015-07-22T21:58:12.310 回答