42

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

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

4

4 回答 4

44

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-afterhyphenate-before与连字符后的字符相同。
  • hyphenate-lines定义一个连字符最多可以写多少行。hyphenate-character您可以指定应该使用哪个 HTML 实体，例如\2010.

这个栈的主要属性是hyphens. 它接受以下三个值之一none：manual或auto。默认是手动的，你可以通过­. auto对于连续文本来说，它是更好的选择，而如果可能且可用的话，单词会被拆分。并且none即使在某个单词中存在用于可能换行符的字符集，也不会连字符。

更新：

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

于 2012-01-20T06:52:10.777 回答
15

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

于 2012-01-20T06:49:49.807 回答
9

要处理具有固定文本宽度的页面，实际的做法是添加几个软连字符 (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 （灵活宽度的文本，仅设置了最大宽度，因此您可以通过改变浏览器窗口宽度对其进行测试）。

于 2012-01-20T08:18:49.967 回答
4

目前我的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;
}

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

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

于 2015-01-02T06:55:52.047 回答