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。
您可以使用hyphenate-resource添加字典文件，以便浏览器有更好的机会使用正确的连字法呈现文字。
hyphenate-before在连字符之前设置最小字符数。
hyphenate-after与hyphenate-before的作用相同，但与连字符后的字符相同。
hyphenate-lines定义了最多以连字数写的行数。使用hyphenate-character，您可以指定应使用哪个HTML实体，例如\2010。

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

<强>更新

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

Answer 2

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

Answer 3

要处理一个具有固定文本宽度的页面，实际的操作是添加一些SOFT HYPHEN字符（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（灵活宽度的文本，只设置了最大宽度，因此您可以测试它改变浏览器窗口宽度）。

Answer 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个字以下）很难看，但总的来说它使得布局看起来更像是正确的设置类型。

是否可以在HTML / CSS中启用自动连字？

4 个答案: