Rumah  >  Artikel  >  hujung hadapan web  >  使用CSS3文本换行的方法介绍

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

高洛峰
高洛峰asal
2017-03-23 10:26:522887semak imbas

一、

目前可被主流支持的:

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

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

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

二、

word-wrap 

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

--长单词换行

word-break  

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

--非CJK("中日韩")脚本的断行规则

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

潜规则——默认情况下(不写任何样式情况下的显示规则):

①单词末尾放不下:另起一行,

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

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

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

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

                                             [ 改② 潜规则 ①③不变]   

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

                                            [ 改③ 潜规则 ①②不变]

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

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

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

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


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

Atas ialah kandungan terperinci 使用CSS3文本换行的方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:使用css3的ie写法示例Artikel seterusnya:关于CSS3阴影使用方法介绍