css单词换行

CSS单词换行是指在特定情况下，为了使文本在行中正常显示，将单词按照特定规则进行换行处理。当一个单词的长度超过了一行的宽度限制时，我们可以使用CSS样式来指定单词换行的方式，以保持文本的可读性和美观性。

在CSS中，我们可以使用"word-wrap"或者"overflow-wrap"属性来控制单词的换行方式。这两个属性都具有相同的功能，只是名称不同。

当我们想要在单词本身的中间位置换行时，可以使用"normal"值。这意味着浏览器会根据它自己的算法来决定如何断开长单词。例如：

```

.word-break {

word-wrap: normal;

overflow-wrap: normal;

}

```

如果我们希望在单词的某个特定位置进行换行，我们可以使用"break-word"值。这样，如果一个单词太长而不能适应一行时，浏览器将会在指定的位置进行换行。例如：

```

.custom-break {

word-wrap: break-word;

overflow-wrap: break-word;

}

```

还有一种情况是，我们希望即使在单词内部也不进行换行，可以使用"keep-all"值。这样，如果一个单词太长而不能适应一行时，浏览器将会将整个单词移到下一行。例如：

```

.no-break {

word-wrap: keep-all;

overflow-wrap: keep-all;

}

```

另外，我们还可以使用"pre"或者"pre-wrap"来控制换行。"pre"表示在保持原样式的情况下，强制一行显示，单词超出边界则不换行。而"pre-wrap"表示在保持原样式的情况下，将单词进行换行显示。例如：

```

.pre-style {

white-space: pre;

}

.pre-wrap-style {

white-space: pre-wrap;

}

```