我正在努力解决浏览器处理逐行对齐文本连字的不同方式。我的文本有以下 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
选项,但我发现没有可以包含和/或编辑的示例文件。理想情况下,如果主要浏览器支持该选项,我将包含它并希望编辑它的非英语单词以及编辑其默认值。
最好的方法是什么?
我正在努力解决浏览器处理连字符的不同方式
逐行对齐文本。
方法一.CSS
See 这个链接 https://css-tricks.com/almanac/properties/h/hyphenate/仅 CSS 解决方案。
article p{
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
您已经尝试过此操作,并发现无论浏览器版本如何,绝对不支持 Chrome,并且各个浏览器之间的结果缺乏一致性。您可能想知道是否有一种更一致的连字符方式可以在所有主要浏览器上正常工作?
方法2.Javascript
Hyphenator.js http://mnater.github.io/Hyphenator/mergeAndPack.html是一个适用于所有主要浏览器的 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>
注意:请注意,我自定义了该类并缩短为连字符而不是默认的连字符
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)