溢出包装 | overflow-wrap (Text) - CSS 中文开发手册 - Break易站
溢出包装 | overflow-wrap (Text) - CSS 中文开发手册
该overflow-wrapCSS属性指定浏览器是否应该向语句中插入换行符,以防止文本溢出其内容框。与word-break相反,如果整个单词不能在没有溢出的情况下放在自己的行上,overflow-wrap只会创建一个中断。
1 2 3 4 5 6 7 8 | /* Keyword values */ overflow-wrap: normal ; overflow-wrap: break-word; /* Global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset; |
该属性最初是一个非标准的,没有前缀的微软扩展word-wrap,并被大多数具浏览器实现。现在,它已经被重新命名为overflow-wrap,而word-wrap则作为该属性的一个别名。
Initial value | normal |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
该overflow-wrap属性被指定为下面的列表中的任一个关键字值。
可能值
normal——行只能在正常的单词断点处(如两个单词之间的空格)断开。
break-word——为了防止溢出,如果在行中没有其他可接受的断点,通常不能破坏的语句也可能会在任意点被断开。
形式语法
1 | normal | break-word |
实例
CSS
1 2 3 4 5 6 7 8 9 | . normal { width : 13em ; background : gold; } .break-word { width : 13em ; background : lime ; overflow-wrap: break-word; } |
HTML
1 2 3 4 5 6 | <p class= "normal" >FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> <p class= "break-word" >FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> |
结果
规范
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3The definition of 'overflow-wrap' in that specification. | Working Draft | Initial definition |
浏览器兼容性
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support (as word-wrap) | 3.5 (1.9.1) | 1.0 | (Yes) | 5.5 | 10.5 | 1.0 |
overflow-wrap | 49 (49) | (Yes) | No support | ? | (Yes) | (Yes) |
Feature | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support (as word-wrap) | 1.0 (1.9.1) | 1.0 | (Yes) | ? | ? | 1.0 |
overflow-wrap | 49 (49) | (Yes) | No support | ? | (Yes) | (Yes) |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多
· C# 开发工具Visual Studio 介绍
· 在 Windows 10 上实现免密码 SSH 登录
· C#中如何使用异步编程