是否可以在 HTML/CSS 中启用自动断字？答案

【问题标题】：Is it possible to enable auto-hyphenation in HTML/CSS?是否可以在 HTML/CSS 中启用自动断字？
【发布时间】：2012-01-20 06:30:22
【问题描述】：

我的客户请求在此页面上启用自动断字：http://carlosdinizart.com/biography/，我意识到我从未真正在网页上看到过它。

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

【问题讨论】：

可能相关：stackoverflow.com/q/320184/104380

标签： html css hyphenation

【解决方案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。
您可以使用hyphenate-resource 添加字典文件，这样浏览器就有更好的机会使用正确的连字符来呈现您的文本。
hyphenate-before 设置连字符前的最少字符数。
hyphenate-after 与 hyphenate-before 相同，但用于连字符后的字符。
hyphenate-lines 定义了一个连字符最多可以写多少行。使用hyphenate-character，您可以指定应该使用哪个 HTML 实体，例如\2010。

这个栈的主要属性是hyphens。它接受以下三个值之一：none、manual 或 auto。默认是手动的，您可以通过&shy; 设置连字符。 auto 它更适合连续文本，而如果可能且可用的话，单词会被拆分。并且none 根本不会连字符，即使在某个单词中存在可能换行符的字符集。

更新：

浏览器支持信息在这里：http://caniuse.com/css-hyphens

【讨论】：

有趣。有什么信息可以说明这一点的支持范围有多广？
我已经更新了一个链接，列出了浏览器对此的支持
我对 Chrome 和 Opera 都很失望。向 IE 和 Firefox 致敬。另外，对我从未听说过或遇到过的房产投赞成票。
尊重，hyphenate-* 属性不再是 CSS 标准的一部分。
看起来 hyphenate-resource 不再是规范的一部分。并且没有浏览器支持它。所以我们依赖于内置字典或第三方 JS 解决方案，如 Hyphenopoly

【解决方案2】：

一种选择是将soft hyphens 插入到文本中可能被破坏的地方。软连字符由 HTML 中的实体 &shy; 表示。您可能会在正确的位置找到可以使用 &shy;s 自动准备文本的库/工具，否则您必须手动完成。

【讨论】：

Teehee 我喜欢它的缩写方式。不要这么害羞！
是的，&shy; 是我最喜欢的 HTML 标签之一。（我真的只是这么说吗？伙计，我是书呆子吗。;o））
@deceze，我想，你想说的是“HTML 实体”，而不是“标签”。 ;)
这个问题是用复制和粘贴文本也会复制软连字符。在某些浏览器中，它也可能会弄乱 Ctrl+F。

【解决方案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（灵活宽度的文本，仅设置了最大宽度，因此您可以通过改变浏览器窗口宽度对其进行测试）。

【讨论】：

显然谷歌不再托管Hyphenator.js。现在cdnjs 上也是一样的吗？

【解决方案4】：

目前我<p>的css是

p   {
    font-style: normal;
    padding: 0;
    margin-top: 0;
    margin-left: 0px ;
    margin-right: .5em ;
    margin-bottom: 0;
    text-indent: 1em;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    word-break:break-word;
    hyphens: auto;
}

这不适用于 Mac 上的 Chrome 39。已知不在 Opera 上工作。适用于 Firefox、iOS Safari。

这不是万无一失的：窄列（6 个字以下）很难看，但总体而言，它使布局看起来更像是正确设置的类型。

【讨论】：