请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 204|回复: 3

CSS技巧:word-wrap与word-break的区别

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-22 22:07:41 | 显示全部楼层 |阅读模式

本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式,详细介绍了word-wrap同word-break的区别。

兼容 IE 和 FF 的换行 CSS 推荐样式

最好的方式是

word-wrap:break-word; overflow:hidden;

而不是

word-wrap:break-word; word-break:break-all;

也不是

word-wrap:break-word; overflow:auto;

在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容。

word-wrap同word-break的区别

word-wrap:

normal  Default. Content exceeds the boundaries of its container.

break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。

word-break:

normal  Default. Allows line breaking within words. 好像是只对Asian text起作用。

break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.

keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.

总结如下:

word-wrap是控制换行的。

使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。

break-word是控制是否断词的。

normal是默认情况,英文单词不被拆开。

break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。

keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)

回复

使用道具 举报

0

主题

1100

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2016-3-13 09:32:58 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

0

主题

1100

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2018-2-27 10:47:47 | 显示全部楼层
赞赞
回复 支持 反对

使用道具 举报

0

主题

1100

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2018-12-26 13:01:32 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2019-3-21 13:47 , Processed in 0.304382 second(s), 33 queries .

快速回复 返回顶部 返回列表