css强制换行 css强制不换行的css方法

下面是关于CSS强制换行和强制不换行的攻略：

CSS强制换行

CSS中可以使用"word-wrap"或"word-break"属性来强制换行。

word-wrap属性

"word-wrap"属性指定了当一个单词太长时，是否允许这个单词断行到下一行。可以设置的值有：

• normal：默认值。只有在遇到可换行点或允许断字点的时候才换行。
• break-word：允许单词内部断行，从而保证单词不溢出到容器之外。

示例代码：

p {
  word-wrap: break-word;
}

在上述代码中，如果p标签内有一个长单词，将自动在单词内部进行断行处理。

word-break属性

"word-break"属性指定了单词如何被分割成行内段落。可以设置的值有：

• normal：默认值。只有在遇到可换行点或允许断字点的时候才换行。
• keep-all：保持全部的单词不拆分成多行。
• break-all：允许单词内部断行，从而保证单词不溢出到容器之外。

示例代码：

p {
  word-break: break-all;
}

在上述代码中，如果p标签有一个长单词，将在单词内部进行断行处理，从而避免单词溢出到容器之外。

CSS强制不换行

可以使用"white-space"属性中的"nowrap"值来强制元素的文本不换行。

white-space属性

"white-space"属性指定文本如何进行空白处理，包括控制是否换行。可以设置的值有：

• normal：默认值，折合换行符。
• nowrap：强制不换行，直到文本到达容器的结尾，然后将折叠进一行。
• pre：保留尾随空格和换行符，但是把文本作为网页源代码中未折叠的空白符处理。
• pre-wrap：保留尾随空格和换行符，并折叠文本中的多个空白符。
• pre-line：保留尾随空格和换行符。折叠文本中的空白符，但保留以换行符结尾的行。

示例代码：

p {
  white-space: nowrap;
}

在上述代码中，如果p标签内有长文本，将不会自动换行，而是被折叠为一行。

另一个示例：

div {
  white-space: pre;
}

在上述代码中，如果div标签内有文本，将保留空格和换行符，而不会折叠它们。