Question

有没有人能够在任何WebKit浏览器中成功实现连字符？我尝试过CSS3 hyphenation样式以及-webkit-hyphens: auto。其中任何一个都没有骰子。或者也许我做错了什么？

注意：我在Mac上只尝试过Safari和Chrome。

更新：代码示例

<html>
  <head>
    <style>
      div {
        -webkit-hyphens: auto;
      }
    </style>
  </head>
  <body>
     <div style="width: 150px; border: solid 1px black;">
       <p>Anaideia, spirit of ruthlessness, shamelessness, and unforgivingness</p>
       <p>Supercalifragilisticexpialidocious, Antidisestablishmentarianism, Floccinaucinihilipilification, Hippopotomonstrosesquipedaliophobia</p>
     </div>
  </body>
</html>

Answer 1

-webkit-hyphens在iOS 4.2及更高版本上运行良好，并且在webkit nightlies中得到部分支持。

的Webkit：

Webkit

iOS 4.3：

iOS 4.3

Answer 2

它可以在Safari中运行（在OS X Lion上使用Safari 5.1进行测试，在iPad上使用Safari手机进行测试），而不是使用Chrome。有关连字符浏览器支持，请参阅http://caniuse.com/css-hyphens。

以下是320及以上项目（http://www.stuffandnonsense.co.uk/projects/320andup/）中段落的样式设置：

p {
    hyphens:auto;
    text-align:justify;
    -webkit-hyphens:auto;
    -webkit-hyphenate-character:"\2010";
    -webkit-hyphenate-limit-after:1;
    -webkit-hyphenate-limit-before:3;
    -moz-hyphens:auto;
}

（最后一行适用于Firefox）

在浏览器中如此合理的文本是一个很大的禁忌 - 慢慢成为现实。

Answer 3

更好的日子即将到来..浏览Editors working draft后 - 在提供的实例中，我认为未来更好的属性将是'overflow-wrap：'。 '连字符：'实际上更适合一般的格式要求，而溢出包装适用于需要断开的过长单词的紧急情况。最好的价值是

* {
overflow-wrap:hyphenate. 
}

Alas overflow-wrap看起来似乎没有任何方式支持iphone或firefox，而overflow-wrap：连字符甚至不在工作草案中。（sadface）

WebKit连字符

3 个答案: