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

Question

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

htmlcsshyphenation

42

我的客户要求在此页面启用自动断字功能：http://carlosdinizart.com/biography/，但我从未在网页上实际看到过这样做。

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

- hanazair

可能相关：https://dev59.com/pHRC5IYBdhLWcg3wXPwC请注意，这是一条机器翻译。 - vsync

4个回答

16

一种选择是在文本中可能被分开的地方插入软连字符。软连字符在HTML中用实体表示。你可以找到能够自动在正确位置准备带有的文本的库/工具，否则你就必须手动添加。

- deceze

Teehee我喜欢它的缩写方式。不要那么害羞！ - wrongusername

3

是的， 是我最喜欢的 HTML 标签之一。（我真的说出这话了吗？哇，我好书呆子。;o)） - deceze

7

@deceze，我想你想说的是“HTML实体”，而不是“标签”。 ;) - hijarian

问题在于，使用复制和粘贴文本时，软连字符也会被复制。这可能会在某些浏览器中破坏 Ctrl+F 的功能。 - Timwi

9

为了处理一些固定宽度文本页面，实际的解决方法是添加一些软连字符字符（U+00AD），可以使用实体引用来代替输入（不可见）字符自身。这样你可以很快地找出哪些单词需要加上连字符以产生良好的结果。

在更复杂的情况下（多页，宽度可变），可以使用预处理器，服务器端代码或客户端代码来添加软连字符。客户端方法最简单，可以独立于服务器端技术和创作工具应用。请注意，自动连字符可能会出现错误，需要一些帮助：需要在标记中指示文本的语言（或其他，取决于所使用的库）。

至少，您只需将属性lang=en class=hyphenate放入<body>标签中，并将以下代码放入部分即可。

<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（文本具有弹性宽度，只设置了最大宽度，因此您可以通过调整浏览器窗口宽度来测试它）。

- Jukka K. Korpela

显然，谷歌不再托管 Hyphenator.js。现在是否在 cdnjs 上有同样的东西？ - Bob Stein

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个单词）看起来不好看，但总体上使得布局看起来更像是正确设置的类型。

- Sherwood Botsford

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ninja · Accepted Answer

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`。默认值是手动，其中您可以通过 `` 来设置连字符。`auto` 对于连续文本更好，而单词如果可能和可用则会被拆分。而 `none` 则完全不使用连字符，即使某个单词有一个字符集可用于换行。 更新:

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