最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

css实现换行连接 Hyphenator插件使用

CSS&HTML AZ 1689浏览 0评论

以前css实现换行添加word-break:break-all和word-wrap:break-word就能使其容器如DIV的内容自动换行。但有时候却不理想,因为单词被强制换行了。

so,now,css实现单词换行连接,必须是现代浏览器支持。

  1. .hyphenate {hyphens: auto;-webkit-hyphens: auto;-ms-hyphens: auto;-moz-hyphens: auto;}

或是使用Hyphenator插件实现,插件来源 https://github.com/mnater/Hyphenator

部份代码

  1. Hyphenator.config({
  2.   classnames: {
  3.   cn1: {
  4.   hyphens: "none | auto | all", //default: auto
  5.   hyphenate-character: "auto | <string>", //default: soft hyphen
  6.   hyphenate-limit-chars: "auto | <integer>{1,3}", //default: 6 2 2 (values from patterns resp)
  7. orphancontrol: "auto | [1-3]", //default: 1
  8. defaultLanguage: "auto | <string>", //default: auto (asks user)
  9. unhide: "auto | wait | progressive" //default: wait
  10. },
  11. ...
  12. }
  13. });

下载传送:下载

转载请注明:TUTERM.COM » css实现换行连接 Hyphenator插件使用

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!