word-break:break-all与word-wrap:break-word

word-break

属性值:  normal      使用默认的换行规则

break-all  允许任意非CJK(chinese/japanese/korean)文本间的单词断行

keep-all   不允许CJK文本中的单词换行,只能在半角空格或连字符处换行

break-all这个值所有的浏览器都支持


word-wrap

属性值:normal    就是大家平常见的最多的正常的换行规则

break-word    一行单词中实在没有其他靠谱的换行点的时候换行

word-wrap  由于和word-break太像,于是在css3规范中,把 属性名改为 overflow-wrap 仅chrome/safari等webkit浏览器支持


两者区别

word-break:break-all
所有的都换行

word-wrap:break-word

如果一行文字有可以换行的点,如空格,或CJK之类的,就让这些换行点换行,不关心对不对齐,好不好看。容易出现一片一片的空白

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 之前通过几何分形学学习了一下缓存机制,今天来学习一下“字词分割学”吧,哈哈,我自己瞎造的词,主要是为了学习一下CS...
    心彻阅读 1,483评论 0 1
  • CSS3中的word-wrap、word-break、white-space想必大家都接触过,今天我们来一起温故而...
    叮咯咙咚DQ阅读 560评论 0 0
  • 逼自己说几句 自己对于文本在块级元素中如何排列的一直不太懂,单词如何换行,是否可以设置换行的机制,代码中单词与单词...
    江君同学阅读 580评论 0 0
  • 写下标题的时候,我刚刚打完乒乓球,按理说多巴胺应该将我的不良情绪强势赶走,可是偏偏不幸,我又开始失控了。不是打球时...
    1988yanxiao阅读 218评论 0 0
  • 名模卡门·戴尔·奥利菲斯80岁仍活跃于欧洲时尚界,整整美了60年。经历三段失败的婚姻,卡门以大妈级年龄重回时尚界,...
    MikaGO阅读 400评论 0 1