摘要：，例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。代码结果如图所示这样就一目了然了。如果您觉得本文对您的学习有所帮助，请多支持与鼓励。
一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。
所以解决方法（以IE，chrome,FF为测试浏览器）有两种写法：
{
word-break:break-all;
word-wrap:break-word;
}
两种方法的区别说明：
1，word-break:break-all 例如div宽400px，它的内容就会到400px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
html代码：
congratulation congratulation congratulation congratulation congratulation congratulationcongratulation congratulation congratulation congratulation congratulation congratulation
结果如图所示：
这样就一目了然了。
如果您觉得本文对您的学习有所帮助，请多支持与鼓励。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111123.html
摘要：理解和的区别从易于区分和理解的角度，我引用了无双在你真的了解和的区别吗一文中对两个属性作用的解释属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 white-space 、 word-wrap 和 word-break 是决定段落中的文本如何展示的3个css属性，属性说明请点击链接查看参考手册。 white-space wh...
摘要：原文链接自动换行问题正常字符的换行是比较合理的而连续的数字和英文字符常常将容器撑大挺让人头疼下面介绍的是如何实现换行的方法对于等块级元素正常文字的换行亚洲文字和非亚洲文字元素拥有默认的当定义的宽度之后自动换行正常文字的换行亚洲文字和非亚洲 原文链接：http://blog.csdn.net/ye987987... 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容...
摘要：原文链接自动换行问题正常字符的换行是比较合理的而连续的数字和英文字符常常将容器撑大挺让人头疼下面介绍的是如何实现换行的方法对于等块级元素正常文字的换行亚洲文字和非亚洲文字元素拥有默认的当定义的宽度之后自动换行正常文字的换行亚洲文字和非亚洲 原文链接：http://blog.csdn.net/ye987987... 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容...
摘要：一个长单词超出整个容器宽度时是否换行必须注意到，这是一个长单词便超出容器宽度的情况，而且只需考虑英文，中文没有此特性。规定如何处理内容溢出容器属性作用于型元素上。 前言 文本方面的CSS内容不少，但只要是用过一下office word来编辑过文章的童鞋都能轻易理解其中的大部分。那么，今天仅仅来谈谈其中最复杂的部分——文本格式。 处理换行、空格和Tab：white-space 众所周知，...
阅读 3804·2023-04-25 19:07
阅读 3551·2021-11-22 12:02
阅读 3136·2021-10-12 10:11
阅读 3906·2021-09-03 10:49
阅读 2890·2019-08-30 13:21
阅读 2996·2019-08-30 11:14
阅读 2087·2019-08-29 15:40
阅读 2871·2019-08-28 18:29
