欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-09 18:50:08
...
一、

目前可被主流支持的:

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 单词末尾放不下 :吻合折断

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

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

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


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

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

相关标签: CSS3文本换行