以前css实现换行添加word-break:break-all和word-wrap:break-word就能使其容器如DIV的内容自动换行。但有时候却不理想,因为单词被强制换行了。
so,now,css实现单词换行连接,必须是现代浏览器支持。
- .hyphenate {hyphens: auto;-webkit-hyphens: auto;-ms-hyphens: auto;-moz-hyphens: auto;}
或是使用Hyphenator插件实现,插件来源 https://github.com/mnater/Hyphenator
部份代码
- Hyphenator.config({
- classnames: {
- cn1: {
- hyphens: "none | auto | all", //default: auto
- hyphenate-character: "auto | <string>", //default: soft hyphen
- hyphenate-limit-chars: "auto | <integer>{1,3}", //default: 6 2 2 (values from patterns resp)
- orphancontrol: "auto | [1-3]", //default: 1
- defaultLanguage: "auto | <string>", //default: auto (asks user)
- unhide: "auto | wait | progressive" //default: wait
- },
- ...
- }
- });
下载传送:下载
转载请注明:TUTERM.COM » css实现换行连接 Hyphenator插件使用