CSS文字换行(css文字换行)

一、基础知识

CSS的文本换行有两种方式：强制换行和自动换行，其中自动换行又分为单词断行和字符断行。

1、强制换行

p {
  white-space: pre;
}

强制在文本中插入换行符，通常在显示计算机代码或诗歌等格式特殊的文本时使用。

2、自动换行

p {
  white-space: normal;
}

二、单词断行

1、word-wrap

p {
  word-wrap: break-word;
}

当一行无法容纳整个单词时，将单词断行，放置在下一行开始，并在上一行结尾添加连字符（“-”）。

2、overflow-wrap

p {
  overflow-wrap: break-word;
}

和word-wrap类似，也是单词断行，但是在断行时会尽量保持单词的完整性，不会添加连字符。

三、字符断行

1、white-space

p {
  white-space: pre-wrap;
}

允许自动换行。当一行无法容纳更多字符时，自动换行，点号之间不断字。

2、text-wrap

p {
  text-wrap: unrestricted;
}

允许自动换行。当一行无法容纳更多字符时，自动换行，点号之间不断字。

四、断行符

1、在文本中添加 <br> 标签。

2、在CSS中使用 content 属性插入断行符。

p:before {
  content: "A";
  white-space: pre-wrap;
}