4

我正在为浏览器处理逐行对齐文本的断字的不同方式而苦苦挣扎。我的文本有以下 CSS 设置：

text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

我的语言设置是en。处理不一致的一个词是“表达”：

Chrome: no hyphenation
Firefox: express-ing [correct!]
IE11: express-ing [correct!]
Safari: express-ing [correct!]

令人费解的是，Safari 能够将德语单词“Gesamtkunstwerk”连字符：

Chrome: no hyphenation
Firefox: no hyphenation
IE11: no hyphenation
Safari: Gesamtkunst-werk [correct!]

我不知道 Safari 是如何感知到这个词是德语并连字号的。有任何想法吗？

CSS3 规范指出了一个hyphenate-resource选项，但我没有找到要包含和/或编辑的示例文件。理想情况下，如果主要浏览器支持该选项，我会包含它并希望为非英语单词编辑它以及编辑其默认值。

最好的方法是什么？

4

1 回答 1

1

我正在为浏览器处理逐行对齐文本的断字的不同方式而苦苦挣扎。

方法 1. CSS
请参阅此链接以获取仅 CSS 的解决方案。

article p{
  text-align: justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

您已经尝试过，发现无论浏览器版本如何都绝对不支持 Chrome，并且发现跨浏览器的结果缺乏一致性。并且可能想知道是否有一种更一致的连字符连字符的方式在所有主要浏览器上都能很好地工作？

方法 2. Javascript
请参阅此链接，了解适用于所有主要浏览器的解决方案。并且......比目前大多数浏览器提供的语言支持更多。首先在您的站点中选择一种（或多种）您需要支持的语言，然后按照步骤自定义您自己的脚本，最后点击“创建！” 这将为您创建缩小的 javascript。你将它复制到你的 hyphenate.js 文件中，最后不要忘记在你想要连字符的段落上定义类。

<head>
  <script src="hyphenate.js" type="text/javascript"></script>
</head>

<body>
  <article lang="nl" class="hyphen">  // in this case Dutch >> NL
    <p>.......</P?
  </article>
</body>

注意：请注意我自定义了类并缩短为连字符而不是默认的连字符

于 2015-11-14T10:33:08.503 回答