2013-01-07 15 views
9

我是break-word ing一个容器,以便极长的单词不会溢出。尽管Chrome和Safari浏览器处理得很好,但Firefox和IE似乎都是随机打破单词 - 即使是简短的文字,也是最荒谬的一点。看下面的截图:Firefox word break在随机点打破短字

enter image description here

这里是我使用,以防止折断的话代码:

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

在此先感谢!

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

的话不再破古怪:

回答

18

你在加倍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; 
} 
+2

这似乎并不为我工作在IE11 – Dave

+0

'连字符:auto;'就够了(对于我的用例) – vsync

+0

这个答案需要更新。不适用于除Chrome以外的当前浏览器版本。浏览器不工作:火狐58.0.2和边缘41.16299.15.0(无断词的话)和IE 11.192.16299.0(打破的话本身包裹时适用)。 – Akerus

4

我改变我的破字的代码做了一个临时的解决办法。我只是不确定在跨浏览器支持方面有多安全(因为我只使用最新版本的Chrome,Firefox和Safari进行了测试)

明确声明连接仅支持en-US显式声明。如果有人有更有效的答案/解释,我会很乐意接受你的答案。

3

删除word-break: break-all。它的含义是它会创建你描述的确切问题:指导浏览器随意将单词分成几部分。

使用word-wrap: break-all更合理(或者说不那么荒谬),因为它告诉浏览器只有在没有其他方法将线条放入可用宽度时才会打破单词。但它也违反了英语和其他大多数语言的规则:在任意点打破一个词是不正确的。所以也要把它拿走。

连写更有道理,但它限制浏览器的支持,并为明显的原因,它需要文本的语言来声明(因为断字的规则是强烈依赖于语言)。您可以使用基于JavaScript的断字如Hyphenator.js对付那些不支持CSS断字

0
word-break:keep-all; 

浏览器解决了这个问题对我来说