最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

通过CSS实现换行的几个标签

CSS rockyxia 6894浏览 0评论

Tags:
text-wrap 定义文本的自动换行效果
属性 效果
normal 在允许的断点处自动换行
none 文本不会自动换行;对于不“合身”的容器,文本将会溢出
unrestricted 在任意的文法单词间都可断行,比 normal 的限制要松散很多
suppress 除非断行处没有其他任何允许的断点,方可进行断行,这比 unrestricted 严格,比 normal 松散

word-wrap 执行最激进的单词断行控制,从单词的内部断开以防止文本溢出容器并且完全适应容器的宽度
在 IE 的实际效果中,word-break 的效果要激进得多,它穷凶极恶地断开所有单词(如果到达边界的话)

属性 效果
normal 仅在允许的文本断点处自动换行
break-word 如果一行中没有其他可接受的断点,那么将强行断开文本单词

line-break 是断行的规则,针对东亚文字
基本是针对日文的换行规则
word-break 是断行的规则,针对非东亚文字

属性 效果
normal 根据特定非东亚文字自己的规则来决定是否自动断行
break-all 允许非东亚语言文本行的任意字内断开。该值适合包含一些非东亚文本的东亚文本
keep-all 不允许非东亚语言文本行的任意字内断开。该值适合包含一些东亚文本的非东亚文本
hyphenation 文本会在合适的连字符处断开,这需要浏览器的支持

做一个归纳:专门用于控制文本自动换行功能的属性是 text-wrap 和 word-wrap,而 line-break 和 word-break 用来控制断行和单词边界分隔,根据 W3C 的描述来说,word-wrap 是最激进的自动换行方式,可以强行断开单词。而现实情况是,word-break: break-all; 的方式要更为激进,

转载请注明:Rockyxia Web技术博客 » 通过CSS实现换行的几个标签
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)