word-break实现多种文本换行效果_word-break设置空格转行-CSDN博客

本文链接：https://blog.csdn.net/qq_36470686/article/details/82818699

当HTML元素不足以显示它里面的所有文本，浏览器会自动换行显示它里面的所有文本。浏览器默认换行规则是，对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行。

如果希望改变浏览器的默认行为，则可通过word-break属性进行设置。该属性支持如下三个值。

normal:靠浏览器的默认规则进行换行。
keep-all：只能在半角空格或连字符处换行。
break-all:设置允许在单词中间换行。

下面代码示范了word-break功能：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> word-break </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		border:1px solid #000000;
		height: 50px;
		width: 240px;
	}
	</style>
</head>
<body>
<!-- 不允许在单词中换行 -->
word-break:keep-all <div style="word-break:keep-all">
The root interface in the collection hierarchy. </div>
<!-- 指定允许在单词中换行 -->
word-break:break-all <div style="word-break:break-all">
The root interface in the collection hierarchy. </div>
</body>
</html>

效果图：