CSS文本换行

一、单词换行

1、单词换行指的是在英文单词的断点处换行，对于阅读体验和排版美观很有帮助。实现方式:

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

2、该方式将英文单词的断点作为换行点，适用于英文站点和长单词的排版。中文也可以使用该方式来进行单词换行。

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

3、此外还有一个CSS3新属性word-wrap，可以将长单词强制分成多行来排版：

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

二、字符换行

1、字符换行指的是在特定字符出现的位置进行换行，比如逗号、空格、破折号等。实现方式如下：

.char-break {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

2、该方式将特定字符位置作为换行点，适用于中英文混排的网站。但是该方式容易导致行宽不一致，需谨慎使用。

三、强制换行

1、有时候需要在特定位置强制换行，比如标题段落等。可以使用CSS中的\n或\r强制换行。

.forced-break {
  white-space: pre-line;
}

2、该方式将\n或\r作为强制换行符，在该处进行换行。适用于需要精细控制排版的场景。

四、多行文本溢出

1、对于长文本的溢出，可以使用CSS的text-overflow属性进行控制。该属性只对单行文本溢出生效。

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2、支持text-overflow的浏览器可以将多行文本溢出压缩成单行文本，并用省略号代替，以达到更好的视觉效果。

五、多行文本折叠

1、对于长段落的显示，可以使用CSS的line-clamp属性进行折叠，只显示指定行数的文本。

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

2、该方式只对支持-webkit-box的浏览器生效。可以指定折叠的行数和最大高度，达到美观的排版效果。