Question

我正在努力解决浏览器在行与行之间处理合理文本连字的不同方式。我的文字有以下css设置：

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

我的语言设置为en。处理不一致的一个词是＆＃34;表达＆＃34;：

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

令人费解的是，Safari可以用德语单词＆＃34; Gesamtkunstwerk＆＃34;：

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

我不知道Safari是如何感知这个词是德语并且正在连字符。有什么想法吗？

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

最好的方法是什么？

Answer 1

我正在努力解决浏览器处理连字符的不同方式从一行到另一行的合理文本。

方法1. CSS
有关仅限CSS的解决方案，请参阅this link。

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

您已经尝试过这一点，并且发现无论浏览器版本如何，Chrome都绝对不支持，并且已经看到浏览器结果缺乏一致性。并且可能想知道是否有一种更加一致的方法来连接所有主流浏览器的单词？

方法2. Javascript
有关适用于所有主流浏览器的解决方案，请参阅this link。而且......目前比大多数浏览器提供的语言支持更多。首先选择一种（或多种）语言，您需要在您的网站中大肆支持，然后按照步骤自定义您自己的脚本，最后点击＆＃34;创建！＆＃34;这将为您创建缩小的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>

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

如何优化连字符

1 个答案: