使用CSS3文本换行的方法介绍

一、

目前可被主流支持的：

 text-overflow 主要解决文本溢出，

取值：clip[ 默认值 ] | ellipsis | string(仅支持Firefox)

配合   white-space : nowrap ; overflow : hidden  使用

二、

word-wrap 

取值：normal [ 默认值 ] | break-word

--长单词换行

word-break  

取值：normal  [ 默认值 ] | break-all | keep-all 

--非CJK（"中日韩"）脚本的断行规则

潜规则——默认情况下（不写任何样式情况下的显示规则）：

①单词末尾放不下：另起一行，

②长单词过长且字母连续：不折断

③长单词过长且带破折号：保守折断  

重点：下述常用的三种样式针对上述3种潜规则进行改进的区别

word-wrap：break-word  长单词过长且字母连续：吻合折断

                                             [ 改② 潜规则 ①③不变]   

word-break：keep-all       长单词过长且带破折号：不折断 

                                            [ 改③ 潜规则 ①②不变]

word-break：break-all      单词末尾放不下          ：吻合折断 

                                            长单词过长且字母连续：吻合折断

                                                  长单词过长且带破折号：吻合折断 

                                                      [最强：潜规则 ①②③全部改变]    

保守折断是按一定格式折断，吻合折断是不留任何边界空白的折断

以上就是使用CSS3文本换行的方法介绍的详细内容，更多请关注php中文网其它相关文章！