关于样式word-break

本文介绍了如何通过设置word-break样式来解决Internet Explorer浏览器中表格布局因文字过多导致宽度撑开的问题,并详细解释了word-break各选项的作用。
在IE中查看表格时,有时会发现表格中的字数太多时会将表格的宽度撑开。这时可以在TD的样式中设置style="word-break:break-all",这个样式是设置单词内的换行行为,特别是对象中出现多语言的情况。

以下引用word-break的说明, 注意word-break是IE5+专有属性

语法:
程序代码
word-break : normal | break-all | keep-all

参数:
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。
### CSS `word-break` 和 `word-wrap` 属性详解 #### 定义与功能 CSS中的`word-break`和`word-wrap`属性用于控制文本如何在容器内换行。这两个属性虽然有相似之处,但在具体行为上有显著区别。 对于`word-break`属性而言,其主要作用是在必要时打破单词边界来适应指定宽度的盒子模型[^2]。此属性具有三个常用值: - **normal**: 使用默认的断字规则。 - **break-all**: 此选项允许在任何字符间断开单词,即使这意味着在一个汉字中间打断它也无妨。 - **keep-all**: 防止非空格字符序列被拆分到两行或多行显示;仅当遇到实际存在的空白符时才会发生折行操作。 另一方面,`word-wrap`(现已更名为`overflow-wrap`)主要用于处理那些过长而无法正常换行的文字串。如果启用了这个特性,则浏览器会在适当位置强制插入软换行点以防止溢出容器边缘的情况出现[^4]。 #### 实际应用案例分析 为了更直观地理解两者间的不同,在下面给出了一段HTML代码片段及其对应的渲染效果说明: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Word Break and Wrap Example</title> <style type="text/css"> .example { width: 150px; border: 1px solid black; padding: 5px; } /* 设置不同的 word-break 值 */ .break-normal { word-break: normal; } .break-all { word-break: break-all; } .keep-all { word-break: keep-all; } /* 启用/禁用 word-wrap (现为 overflow-wrap) */ .wrap-normal { overflow-wrap: normal; } .wrap-break-word { overflow-wrap: break-word; } </style> </head> <body> <div class="example break-normal wrap-normal">这是一个非常长而且没有任何间隔符连接在一起形成的字符串。</div><br/> <div class="example break-all wrap-normal">这是一些连续的日语假名:あいうえおかきくけこさしすせそたちつてと...</div><br/> <div class="example keep-all wrap-break-word">英文句子通常由多个单词组成并以空格隔开 Each English sentence is made up of multiple words separated by spaces.</div> </body> </html> ``` 上述例子展示了三种情况下文字的表现形式变化——通过调整`.example`类下的子元素所附加的具体样式类别实现对比展示目的。值得注意的是最后一个实例中同时设置了`word-break: keep-all`以及`overflow-wrap: break-word`两个参数组合使用的效果。 #### 关键点总结 - 当希望严格遵循原有文本结构而不随意切割词语时应选用`word-break: keep-all`; - 对于需要尽可能紧凑排列内容的情形可以考虑采用`word-break: break-all`; - 若目标在于避免因单个超长不可分割单元造成布局破坏则推荐开启`overflow-wrap: break-word`机制。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值