码迷,mamicode.com
首页 > 其他好文 > 详细

溢出容器换行问题

时间:2018-02-25 13:06:29      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:技术分享   单词   显示   宽度   容器   自动识别   分享图片   就是   强制   

问题描述:容器定宽高后,汉字溢出会自动换行,但是数字和字母不会换行。

  因为计算机是通过空格或者“-”判断字母或者数字到哪个地方为一个单词或者数字,计算机“并不聪明”,因为它不会自动识别单词,例如“Iloveyou”,人眼一看就知道这是三个单词组成的一句话,但是计算机不会判断,它找不到空格或者“-”就认为这是一个单词,所以就算超出了容器也不会换行。

  这和一个css属性有关:word-break;word-break 属性规定自动换行的处理方法,常用的有三个值:normal,break-all和keep-all。

  1.normal,意思是使用浏览器的默认换行规则,具体是 ①对于汉字,超出容器宽度就会换行;②对于字母或数字,会找空格或者“-”来区分单词或数,如果一直找不到就会在一行显示下去,不换行。如果找到了空格,还会判断空格后面的字母在容器当前行的剩余部分能不能容下,如果能在剩余的部分容下,就显示在剩余部分,如果不能,那么对不起,这座小庙不能容下后面的大佛,大佛需要找下一行容身。

技术分享图片技术分享图片

  2.break-all,允许在单词内换行。这个属性对汉字没有影响,但是设置此属性后会让字母或者数字拥有和汉字一样的换行规则,也就是超出容器宽度就会换行,并且是强制换行。从字面意思也能理解,break-all,打断所有,不管换行的节点是不是一个完整的单词,可在任意字符间断行。

技术分享图片技术分享图片

3.keep-all,意思只能在半角空格或连字符处换行。我的理解是和normal没区别。

个人总结笔记,绝知此事要躬行,有误请指出,非常感谢!

 

溢出容器换行问题

标签:技术分享   单词   显示   宽度   容器   自动识别   分享图片   就是   强制   

原文地址:https://www.cnblogs.com/yk-68/p/8468698.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!