overflow-wrap详解

overflow-wrap

overflow-wrap属性在CSS文本中是比较常用的，本部将带你深入理解overflow-wrap属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上overflow-wrap的实例，希望能够对你有所帮助。

overflow-wrap定义和用法

overflow-wrap: normal | break-word

• 默认值：normal
• 适用于：所有元素
• 继承性：有
• 动画性：否
• 计算值：指定值
• 相关属性：[ word-wrap ] || [ word-break ]

overflow-wrap属性值

• normal: 允许内容顶开或溢出指定的容器边界。
• break-word: 内容将在边界内换行。如果需要，单词内部允许断行。

overflow-wrap说明

设置或检索当内容超过指定容器的边界时是否断行。

CSS3中将 word-wrap 改名为 overflow-wrap；

由于历史原因，当你使用 overflow-warp 时，最好同时使用 word-wrap 作为备选，作向前兼容。

对应的脚本特性为 overflowWrap。

overflow-wrap浏览器支持

overflow-wrap实例

	
		
		
		
	
	
		

			

				normal:
				
abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcab
			
			

				break-word:
				
abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcab
			
			

				break-word:
				
中英混排的时候abcabcabcabcabcabcabcabcabcabcabcab
			
		
	

效果：