17

有没有人成功地在任何 WebKit 浏览器中实现连字符？我已经尝试过 CSS3hyphenation样式以及-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>
4

3 回答 3

25

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

网络套件：

网络套件

iOS 4.3：

iOS 4.3

于 2011-03-18T21:15:43.083 回答
13

它可以在 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）

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

于 2011-12-01T01:44:57.393 回答
3

更好的日子即将到来.. 在浏览了编辑工作草案之后- 在提供的实例中，我认为未来更好的属性将是“溢出包装：”。'hyphens:' 确实更适合一般格式要求，而溢出换行适用于需要中断的过长单词的紧急情况。最好的价值是

* {
overflow-wrap:hyphenate. 
}

唉，在 iphone 或 firefox 上似乎还没有以任何方式支持溢出包装，并且溢出包装：连字符甚至不在工作草案中。（悲伤的脸）

于 2012-04-27T02:28:53.543 回答