是否可以在 HTML/CSS 中启用自动断字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8937591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to enable auto-hyphenation in HTML/CSS?
提问by hanazair
My client has requested to enable auto-hyphenation on this page: http://carlosdinizart.com/biography/, and I realized I've never actually seen it done on a web-page.
我的客户要求在此页面上启用自动断字：http: //carlosdinizart.com/biography/，我意识到我从未真正在网页上看到过它。
Is it possible to set up auto-hyphenation in an HTML document with just HTML/CSS? If not - what are the options?
是否可以仅使用 HTML/CSS 在 HTML 文档中设置自动断字？如果没有 - 有哪些选择？
回答by Ninja
CSS3 provides some support for this. Source: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/You can check the w3c documentation here: http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation
CSS3 对此提供了一些支持。来源：http: //drublic.de/blog/css3-auto-hyphenation-for-text-elements/您可以在此处查看 w3c 文档：http: //www.w3.org/TR/2011/WD-css3- text-20110901/#hyphenation
CSS3 adds six properties to the list of useful thing. These are:
CSS3 在有用的东西列表中添加了六个属性。这些是：
- The most important one is
hyphens. - You can add dictionary-files with
hyphenate-resourceso the browser has a better chance to render your text with the right hyphenation. hyphenate-beforesets a minimum number of characters before the hyphenation.hyphenate-afterdoes the same ashyphenate-beforebut for characters after the hyphenation.hyphenate-linesdefines about how many lines a hyphenated word is written at a maximum. withhyphenate-characteryou can specify which HTML-entity should be used, e.g.\2010.
- 最重要的一个是
hyphens。 - 您可以添加字典文件，
hyphenate-resource以便浏览器有更好的机会使用正确的断字来呈现您的文本。 hyphenate-before设置连字符前的最少字符数。hyphenate-after与hyphenate-before但对于连字符后的字符的作用相同。hyphenate-lines定义带连字符的单词最多写入多少行。与hyphenate-character您可以指定哪些HTML实体应该被使用，例如\2010。
The main property of this stack is hyphens. It accepts one of three values: none, manualor auto. The default one is manual, where you can set hyphens via ­. autoit the better one for continuous text while words get split if possible and available. And nonedoes not hyphenate at all even if there is a character set for a possible line break in a certain word.
此堆栈的主要属性是hyphens。它接受以下三个值之一：none,manual或auto。默认是手动的，您可以通过­. auto对于连续文本来说，它更好，而如果可能和可用的话，单词会被拆分。none即使某个单词中可能存在换行符的字符集，也根本不会连字符。
Update:
更新：
Browser support information here: http://caniuse.com/css-hyphens
浏览器支持信息在这里：http: //caniuse.com/css-hyphens
回答by deceze
An option is to insert soft hyphensinto the text in places where it maybe broken. The soft hyphen is represented by the entity ­in HTML. You may find libraries/tools that can prepare text automatically with ­s in the right places, otherwise you'll have to do it manually.
一种选择是在文本可能被破坏的地方插入软连字符。软连字符由HTML 中的实体表示。您可能会找到可以在正确位置使用s自动准备文本的库/工具，否则您将不得不手动进行。­­
回答by Jukka K. Korpela
To deal with one page that has fixed width for text, the practical move would be to add a couple of SOFT HYPHEN characters (U+00AD), using the entity reference ­if you find it more comfortable than entering the (invisible) character itself. You can rather quickly find out which words need to be hyphenated to produce a good result.
要处理具有固定文本宽度的页面，实际的做法是添加几个 SOFT HYPHEN 字符 (U+00AD)，­如果您觉得实体引用比输入（不可见）字符本身更方便，则使用实体引用。您可以很快地找出哪些词需要连字符才能产生好的结果。
In a more complex case (several pages, flexible width), use a preprocessor, or server-side code, or client-side code that adds soft hyphens. The client-side approach is simplest and can be applied independently of server-side technologies and authoring tools. Beware that automatic hyphenation may go wrong and needs some help: the language(s) of the text need to be indicated in markup (or otherwise, depending on the library used).
在更复杂的情况下（几个页面，灵活的宽度），使用预处理器，或服务器端代码，或添加软连字符的客户端代码。客户端方法最简单，可以独立于服务器端技术和创作工具应用。请注意，自动断字可能会出错并且需要一些帮助：需要在标记中指明文本的语言（或以其他方式，取决于所使用的库）。
At the minimum, you could just put the attributes lang=en class=hyphenateinto the <body>tag and the following code in the headpart:
至少，您可以将属性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>
Demo: http://bytelevelbooks.com/code/javascript/hyphenation.html(flexible-width text, with just maximum width set, so you can test it varying the browser window width).
演示：http: //bytelevelbooks.com/code/javascript/hyphenation.html（灵活宽度的文本，只设置了最大宽度，所以你可以测试它改变浏览器窗口的宽度）。
回答by Sherwood Botsford
At present my css for <p>is
目前我的 css<p>是
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;
}
This doesn't work for Chrome 39 on Mac. Known not to work on Opera. Works for Firefox, iOS Safari.
这不适用于 Mac 上的 Chrome 39。已知不在 Opera 上工作。适用于 Firefox、iOS Safari。
This is NOT foolproof: Narrow columns (under 6 words) are ugly, but overall it makes the layout look far more like properly set type.
这并非万无一失：窄列（6 个字以下）很难看，但总体而言，它使布局看起来更像是正确设置的类型。
