WebKit 连字符

发布于 2024-10-22 18:27:56 字数 740 浏览 7 评论 0 原文

有人能够在 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>

原文

Has anyone successfully been able to implement hyphenation in any of the WebKit browsers? I've tried the CSS3 hyphenation style as well as -webkit-hyphens: auto. No dice for either of those. Or maybe I'm doing something wrong?

Note: I've only tried Safari and Chrome on a Mac.

Update: Code example

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终止放荡 2024-10-29 18:27:56

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

Webkit：

iOS 4.3：

回复收藏 0 原文

柳絮泡泡 2024-10-29 18:27:56

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

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

It works in Safari (tested with Safari 5.1 on OS X Lion, and Safari mobile on iPad), not with Chrome yet. See http://caniuse.com/css-hyphens for hyphens browser support.

Here is how paragraphs are styled in the 320 and up project (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;
}

(last line is for Firefox)

So justified text in browsers which was a big no-no is slowly becoming a reality.

回复收藏 0 原文

要走干脆点 2024-10-29 18:27:56

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

* {
overflow-wrap:hyphenate. 
}

，唉，overflow-wrap 似乎在 iphone 或 firefox 上还没有以任何方式得到支持，而且overflow-wrap:hyphenate 甚至不在工作草案中。（悲伤的表情）

Better days are coming.. After browsing the Editors working draft - In the instance provided I think the better property in future would be 'overflow-wrap:'. 'hyphens:' is really more suited to general formatting requirements, whereas overflow-wrap is for the emergency cases of overly long words that require breaking. The best value would be

* {
overflow-wrap:hyphenate. 
}

Alas overflow-wrap doesen't seem to be supported in any way just yet on the iphone or firefox, and overflow-wrap:hyphenate isn't even in the working draft. (sadface)

回复收藏 0 原文

~没有更多了~