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
,manual
或auto
.默认值为manual,您可以在其中设置连字符­
.auto
对于连续文本来说,它是更好的一个,而如果可能的话,单词会被分割.并且none
即使在某个单词中存在可能的换行符的字符集,也不会连字符.
更新:
浏览器支持信息:http://caniuse.com/css-hyphens
要处理一个具有固定文本宽度的页面,实际的操作是添加一些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(灵活宽度文本,只设置最大宽度,因此您可以测试它改变浏览器窗口宽度).