WebKit连字化技术

Question

WebKit连字化技术

18

有没有人成功地在任何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>

- dandax

你想在哪里实现它们？能否给我们一个示例文本？ - Myles Gray

这里是那段代码的链接（webkit拼写正确 :) ）http://jsbin.com/ihama4/2/ - Rich Bradshaw

你是怎么想出那些长单词的？我之前只听过第一个。Supercalifragilisticexpialidocious - 700 Software

在我的iPhone上完美运行！正是我所寻找的。-- 还纠正了我的拼写错误 ;) -- 干杯。 - dandax

2

@George Bailey：好老的维基百科。我刚搜了一下“最长的单词”。但愿我能说这些都是我脑海里想出来的... - dandax

3个回答

14

在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 的)

- nachomaans

3

更好的日子即将到来.. 在浏览编辑工作草案后 - 在提供的实例中，我认为未来更好的属性应该是'overflow-wrap:'。 'hyphens:' 更适合一般格式要求，而 overflow-wrap 适用于需要断开过长单词的紧急情况。最佳值应为

* {
overflow-wrap:hyphenate. 
}

不幸的是，在iPhone或Firefox上，似乎还不支持任何方式的溢出换行，而overflow-wrap:hyphenate甚至没有出现在工作草案中。(悲伤的表情)

- adriatiq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rich Bradshaw · Accepted Answer

-webkit-hyphens在iOS 4.2及以上版本上表现良好，在webkit夜间版中部分支持。

Webkit:

iOS 4.3: