CSS 中 word-break 和 word-wrap 的区别

2024-01-29 01:06:30

在CSS中，word-break和word-wrap都是用来控制文本换行的属性，但它们之间存在着一些关键的区别。

首先，word-break属性控制着单词在行尾的换行方式，而word-wrap属性控制着整个文本的换行方式。

其次，word-break属性有三个取值：normal、break-all和break-word。normal是默认值，表示单词不会在行尾换行。break-all表示单词可以在任何地方换行，即使这样会产生不美观的间隙。break-word表示单词只能在空格或连字符处换行。

而word-wrap属性也有三个取值：normal、break-word和initial。normal是默认值，表示文本不会在行尾换行。break-word表示文本可以在任何地方换行，即使这样会产生不美观的间隙。initial表示使用浏览器的默认值。

第三，word-break属性只能应用于内联元素，而word-wrap属性可以应用于块级元素和内联元素。

总的来说，word-break属性用于控制单词在行尾的换行方式，而word-wrap属性用于控制整个文本的换行方式。word-break属性只能应用于内联元素，而word-wrap属性可以应用于块级元素和内联元素。

为了更好地理解这两个属性的区别，我们来看几个示例。

<!DOCTYPE html>
<html>
<head>

<style>
.normal {
  word-break: normal;
}

.break-all {
  word-break: break-all;
}

.break-word {
  word-break: break-word;
}

.normal-wrap {
  word-wrap: normal;
}

.break-word-wrap {
  word-wrap: break-word;
}
</style>
</head>
<body>
<p class="normal">这是一个很长的单词，它不会在行尾换行。</p>

<p class="break-all">这是一个很长的单词，它可以在任何地方换行，即使这样会产生不美观的间隙。</p>

<p class="break-word">这是一个很长的单词，它只能在空格或连字符处换行。</p>

<p class="normal-wrap">这是一段很长的文本，它不会在行尾换行。</p>

<p class="break-word-wrap">这是一段很长的文本，它可以在任何地方换行，即使这样会产生不美观的间隙。</p>
</body>
</html>