CSS - word-break 属性



CSS 中的 word-break 属性用于指定在单词超过元素的可用宽度时应如何分隔或换行。它决定浏览器是否应该允许单词在任何时候中断,或者它们是否应该保持在一起。

可能的值

  • normal:使用默认换行规则。
  • break-all:应用分词符,以防止溢出。
  • keep-all:中文、日文和韩文不能使用分词符;而对于其他语言,应该是正常的。
  • break-word:与任何地方相同,即应用任何单词的分词符。但此值已弃用。

适用于

所有 HTML 元素。

DOM 语法


object.style.wordBreak = "break-all";

下面是一个示例:


<html>
<head>
<style>
	 	p {
	 	 	 border: 2px solid green;
	 	 	 width: 200px;
	 	}
	 	.normal {
	 	 	 word-break: normal;
	 	}
	 	.all {
	 	 	 word-break: break-all;
	 	}
	 	.keep {
	 	 	 word-break: keep-all;
	 	}
	 	.wordbreak {
	 	 	 word-break: break-word;
	 	}
</style>
</head>
<body>
	 	<h2>Word Break</h2>
	 	<p class="normal">normal - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
	 	<p class="all">break-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
	 	<p class="keep">keep-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
	 	<p class="wordbreak">break-word - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
</body>
</html>