可以在HTML/CSS中启用自动连字符吗？

Question

我的客户要求在这个页面上启用自动连字：http://carlosdinizart.com/biography/，我意识到我从来没有在网页上看到过这样做。

是否可以仅使用HTML/CSS在HTML文档中设置自动连字？如果没有--有哪些选择？

Answer 1

CSS3对此提供了一些支持。来源：http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/您可以在这里查看w3c文档：http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation

CSS3在有用的东西列表中添加了六个属性。它们是：

最重要的一点是hyphens.

• You可以添加字典文件，这样浏览器就有更好的机会用正确的hyphenation.

• hyphenate-before呈现你的文本。hyphenation.

• hyphenate-after在hyphenation.

• hyphenate-lines之前设置最少的字符数与相同，但是对于
• 之后的字符，hyphenate-resource定义了一个连字符单词最多可以写多少行。使用HTML语言，您可以指定应该使用哪个hyphenate-character实体，例如\2010.

这个堆栈的主要属性是hyphens。它接受以下三个值之一：none、manual或auto。默认设置为manual，您可以通过­设置连字符。对于连续的文本，auto是更好的，而单词在可能和可用的情况下会被拆分。而且，即使某个单词中可能存在换行符的字符集，none也完全不会连字符连接。

更新：

此处提供浏览器支持信息：http://caniuse.com/css-hyphens

Answer 2

一种选择是将soft hyphens插入到文本中可能断开的位置。在HTML中，软连字符由实体­表示。你可能会发现一些库/工具可以在正确的地方使用­自动准备文本，否则你必须手动完成。

Answer 3

要处理具有固定文本宽度的页面，实际的做法是添加几个软连字符(U+00AD)，如果您觉得使用实体引用­比输入(不可见的)字符本身更方便的话。您可以相当快速地找出哪些单词需要用连字符连接才能产生好的结果。

在更复杂的情况下(多个页面，灵活的宽度)，使用预处理器，或服务器端代码，或添加软连字符的客户端代码。客户端方法是最简单的，可以独立于服务器端技术和创作工具来应用。注意，自动连字可能会出错，需要一些帮助:文本的语言需要在标记中指明(否则，取决于所使用的库)。

至少，您可以将属性lang=en class=hyphenate放入<body>标记中，并将以下代码放入head部件中：

<script 
  src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>

演示：http://bytelevelbooks.com/code/javascript/hyphenation.html (可变宽度文本，设置了最大宽度，因此您可以通过改变浏览器窗口宽度对其进行测试)。