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

han*_*air 40 html css hyphenation

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

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

Nin*_*nja 40

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 在连字符之前设置最小字符数.
  • hyphenate-after不一样的hyphenate-before,但对字符断字后.
  • hyphenate-lines定义一个带连字符的字最多写入多少行.与hyphenate-character您可以指定哪些HTML实体应该被使用,例如\2010.

这个堆栈的主要属性是hyphens.它接受三个值中的一个:none,manualauto.默认值为manual,您可以在其中设置连字符­.auto对于连续文本来说,它是更好的一个,而如果可能的话,单词会被分割.并且none即使在某个单词中存在可能的换行符的字符集,也不会连字符.

更新:

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

  • 我对Chrome和Opera感到失望.感谢IE和Firefox.此外,对我没有听说过或遇到的财产进行投票. (3认同)

dec*_*eze 13

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

  • @deceze,我想,你想说"HTML实体",而不是"标签".;) (6认同)
  • 是的,`­`是我最喜欢的HTML标签之一.(我真的只是说这个吗?伙计,我是书呆子.; o)) (3认同)

Juk*_*ela 9

要处理一个具有固定文本宽度的页面,实际的操作是添加一些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>
Run Code Online (Sandbox Code Playgroud)

演示:http://bytelevelbooks.com/code/javascript/hyphenation.html(灵活宽度文本,只设置最大宽度,因此您可以测试它改变浏览器窗口宽度).