今天在开发中，测试提出一个bug，超出盒子的宽度文字没有自动换行，当时我在自测的时候只考虑到了中文，忽略了英文，数字以及一些特殊字符。我们知道，中文超出盒子的宽度会自动换行，内容的高度撑起盒子的高度
image.png
但是如果是英文或者数字，特殊符号就会出现超出盒子边框的情况
image.png
这俩种方法都能使英文数自动换行。这里我主要想说的是俩者的区别：
word-wrap：break-word以单词为单位换行，如果有个字符串足够长，空余的空间不能容下这个串，就会自动换到下一行。所以，缺点也很明显，前一行会留很大的空白
image.png
word-break : break-all就能很好的解决上边的问题。它不管你字符串有多长，只要超出盒子的宽度就会强制性的自动换行。缺点就是，会把一个完整的字符串（英语单词）截成上下俩部分
image.png
强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-br...
今天在开发中，测试提出一个bug，超出盒子的宽度文字没有自动换行，当时我在自测的时候只考虑到了中文，忽略了英文，数...
1.换行：区别word-wrap:break-word和word-break:break-all 【css3】wo...
Css3文本与字体 文本阴影 word-break换行： word-wrap换行(中文无效)： 文本溢出时处理： ...
1.换行 css中word-break、word-wrap、white-space的区别 2.max-width ...
文本换行规则中涉及的属性有word-wrap 、word-break 、white-space。mozilla开发...
1、文字强制换行，多文本溢出用省略号表示 p{ word-break:break-all; word-wrap:b...
解决方法：设置css属性：word-break:break-all;word-wrap:break-word
1、文字自动换行 word-wrap:break-word; word-break:normal; 2、文字不换行...
图片自动撑满 是否换行 word-wrap和word-break的区别吗？https://www.cnblogs....
本文标题：css强制换行的属性word-wrap和word-break
本文链接：https://www.haomeiwen.com/subject/csttvxtx.html
网友评论