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

我的客户请求在这个页面上启用自动连字符： http : //carlosdinizart.com/biography/ ，我意识到我从来没有在网页上看过它。

是否可以在HTML文档中设置HTML / CSS的自动连字？ 如果没有 – 有什么select？

CSS3为此提供了一些支持。 资料来源： http : //drublic.de/blog/css3-auto-hyphenation-for-text-elements/您可以在这里查看w3c文档： http : //www.w3.org/TR/2011/WD-css3-文本20110901 /＃断字

CSS3将六个属性添加到有用的东西列表。 这些是：

  • 最重要的是hyphens 。
  • 您可以添加hyphenate-resource字典文件，以便浏览器有更好的机会使用正确的连字符呈现文本。
  • hyphenate-before设置最less的字符数。
  • hyphenate-after与hyphenate-before相同，但连字符之后的字符相同。
  • hyphenate-lines定义了最多写一个带连字符的单词的行数。 使用hyphenate-character可以指定应使用哪个HTML实体，例如\2010 。

这个堆栈的主要属性是hyphens 。 它接受三个值之一： none ， manual或auto 。 默认的是手动的，你可以通过­设置连字符­ 。 auto它是连续文本更好的一个单词如果可能和可用分裂。 而且即使在某个单词中有一个可能的换行符的字符集，也不会有连字符。

更新：

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

一个选项是在可能被破坏的地方在文本中插入软连字符 。 软连字符由实体­ 在HTML中。 你可能会发现图书馆/工具，可以自动准备文字­ 在正确的地方，否则你将不得不手动去做。

为了处理一个固定宽度的文本，实际的做法是添加一些SOFT HYPHEN字符（U + 00AD），使用实体引用­ 如果你觉得比进入（看不见的）angular色本身更舒服。 你可以很快找出哪些单词需要连字符以产生一个好的结果。

在一个更复杂的情况下（几页，灵活的宽度），使用预处理器或服务器端代码或客户端代码添加软连字符。 客户端方法最简单，可以独立于服务器端技术和创作工具来应用。 请注意，自动连字可能会出错，需要一些帮助：文本的语言需要在标记中注明（或根据使用的库而定）。

至less，你可以把属性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 （灵活宽度的文本，只有最大宽度设置，所以你可以testing它改变浏览器窗口的宽度）。

目前我的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字以下）很丑，但总的来说，它使布局看起来更像是正确的设置types。

Interesting Posts