CSS - overflow-wrap 属性

上一页
下一页

CSS overflow-wrap 属性使浏览器能够在牢不可破的字符串中拆分一行文本，以防止内容溢出其容器。此属性仅适用于内联元素。

可能的值

  • normal -行只能在正常的单词断点（例如两个单词之间的空格）处断开。
  • anywhere -如果行中没有其他可接受的断点，则这些会在任何时候断开长字或 URL。
  • break-word -如果行中没有其他可接受的断点，这将在任意点处中断通常不中断的单词。

适用于

所有 HTML 元素。

语法


overflow-wrap = normal|anywhere|break-word;

CSS overflow-wrap - 随处值

以下示例演示了 overflow-wrap 属性如何根据其值分解一个长单词 -


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	}
	 	.overflow-wrap-anywhere {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 100px;
	 	 	 height: 150px;
	 	 	 overflow-wrap: anywhere;
	 	 	 margin-right: 50px;
	 	}
	 	.overflow-wrap-break-word {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 130px;
	 	 	 overflow-wrap: break-word;
	 	 	 margin-right: 50px;
	 	}
	 	.overflow-wrap-normal {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 130px;
	 	 	 overflow-wrap: normal;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <p class="overflow-wrap-anywhere">
	 	 	 	 	<strong>overflow-wrap-anywhere</strong> Lorem Ipsum is simply dummy text of the printing and typesettingindustryomnisdolorrty repellendus non-characteristic.
	 	 	 </p>
	 	 	 <p class="overflow-wrap-break-word">
	 	 	 	 	<strong>overflow-wrap-break-word</strong> Lorem Ipsum is simply dummy text of the printing and typesettingindustryomnisdolorrty repellendus non-characteristic.
	 	 	 </p>
	 	 	 <p class="overflow-wrap-normal">
	 	 	 	 	<strong>overflow-wrap-normal</strong> Lorem Ipsum is simply dummy text of the printing and typesettingindustryomnisdolorrty repellendus non-characteristic.
	 	 	 </p>
	 	</div>
</body>
</html>

CSS overflow-wrap - break-word 值

此示例演示了 overflow-wrap、word-break 和 hyphens 属性如何根据其值拆分长单词 -


<html>
<head>
<style>
	 	p {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 11em;
	 	 	 padding: 3px;
	 	}
	 	.wrap-normal {
	 	 	 overflow-wrap: normal;
	 	}
	 	.wrap-anywhere {
	 	 	 overflow-wrap: anywhere;
	 	}
	 	.wrap-break-word {
	 	 	 overflow-wrap: break-word;
	 	}
	 	.break-all {
	 	 	 word-break: break-all;
	 	}
	 	.hyphens-auto {
	 	 	 hyphens: auto;
	 	}
	 	span {
	 	 	 color: #D90F0F;
	 	 	 font-size: 20px;
	 	}
</style>
</head>
<body>
	 	<p>
	 	 	 <span>overflow-wrap: normal</span><br>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and
	 	 	 	 	<i class="wrap-normal">typesettingindustryomnqwertyuiop</i>
	 	 	 	 	repellendus. non-characteristic words, Temporibus autem quibusdam et.
	 	</p>
	 	<p>
	 	 	 <span>overflow-wrap: anywhere</span><br>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and
	 	 	 	 	<i class="wrap-anywhere">typesettingindustryomnqwertyuiop</i>
	 	 	 	 	repellendus. non-characteristic words, Temporibus autem quibusdam et.
	 	</p>
	 	<p>
	 	 	 <span>overflow-wrap: break-word</span><br>
	 	 	 Lorem Ipsum is simply dummy text of the printing and
	 	 	 <i class="wrap-break-word">typesettingindustryomnqwertyuiop</i>
	 	 	 repellendus. non-characteristic words, Temporibus autem quibusdam et.
	 	</p>
	 	<p>
	 	 	 <span>word-break: break-all</span><br>
	 	 	 Lorem Ipsum is simply dummy text of the printing and
	 	 	 <i class="break-all">typesettingindustryomnqwertyuiop</i>
	 	 	 repellendus. non-characteristic words, Temporibus autem quibusdam et.
	 	</p>
	 	<p>
	 	 	 <span>hyphens without lang attribute</span><br>
	 	 	 Lorem Ipsum is simply dummy text of the printing and
	 	 	 <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i>
	 	 	 repellendus. non-characteristic words, Temporibus autem quibusdam et.
	 	</p>
	 	<p lang="en">
	 	 	 <span>hyphens with English rule</span><br>
	 	 	 Lorem Ipsum is simply dummy text of the printing and
	 	 	 <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i>
	 	 	 repellendus. non-characteristic words, Temporibus autem quibusdam et.
	 	</p>

	 	<p class="hyphens-auto" lang="fr">
	 	 	 <span>hyphens with French rule</span><br>
	 	 	 Lorem Ipsum is simply dummy text of the printing and
	 	 	 <i class="hyphens-auto">typesettingindustryomnqwertyuiop</i>
	 	 	 repellendus. non-characteristic words, Temporibus autem quibusdam et.
	 	</p>
</body>
</html>
打印本页
上一页
下一页