overflow-wrap详解

万能螺丝刀1

已于 2022-04-13 15:43:14 修改

阅读量1w

点赞数 3

分类专栏： CSS 文章标签： css

于 2022-04-09 14:19:05 首次发布

本文链接：https://blog.csdn.net/hnyanzijun1/article/details/124060223

版权

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中的overflow-wrap属性，用于控制内容超出容器时是否断行。内容包括overflow-wrap的语法、取值、作用及浏览器兼容性。通过实例展示了normal和break-word两个值的效果，帮助读者理解和应用此属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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实例

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<title>CSS overflow-wrap属性详解-CSS</title>
		<style>
			.test p {
				width: 100px;
				border: 1px solid #000;
				background-color: #eee;
			}
			.normal p {
				word-wrap: normal;
				overflow-wrap: normal;
			}
			.break-word p {
				word-wrap: break-word;
				overflow-wrap: break-word;
			}
		</style>
	</head>
	<body>
		<ul class="test">
			<li class="normal">
				<strong>normal:</strong>
				<p>abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcab</p>
			</li>
			<li class="break-word">
				<strong>break-word:</strong>
				<p>abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcab</p>
			</li>
			<li class="break-word">
				<strong>break-word:</strong>
				<p>中英混排的时候abcabcabcabcabcabcabcabcabcabcabcab</p>
			</li>
		</ul>
	</body>
</html>