CSS控制文字自动换行
1. 什么是自动换行？
自动换行是指当一行文字将达到其容器的最大宽度时，浏览器会自动将文字换到下一行，以保证文字在容器中显示完整，不会溢出。实现文字自动换行是 CSS 中常用的技术，也是网页布局中必不可少的一部分。
2. 如何实现自动换行？
实现文字自动换行的方法有三种：使用 word-wrap: break-word;、使用 word-break: break-all; 和使用 white-space: pre-wrap;。下面分别介绍这三种方法的使用情况。
2.1 word-wrap: break-word
该方法是常用的自动换行方法，其作用是强制在单词中间进行换行以保证其在容器中完整显示。
p {
width: 200px;
word-wrap: break-word;
}
注意：该属性只能在元素的宽度明确的情况下才能生效。
2.2 word-break: break-all
该方法也是在单词中间进行换行，但与 word-wrap: break-word; 不同的是，它不考虑单词的长度，而是在任何地方进行换行，以保证元素在所给定的宽度内完整显示。
p {
width: 200px;
word-break: break-all;
}
注意：如果元素中存在超长单词，该属性可能会破坏单词的完整性。
2.3 white-space: pre-wrap
该方法是保留空白符和换行符的自动换行方法。这意味着元素中的空格、制表符和换行符都会保留，并在达到最大宽度时进行换行。
p {
width: 200px;
white-space: pre-wrap;
}
注意：该属性对换行符的保留体现在换行符前后都会显示空格，因此如果不想出现该情况，可以使用把内容存为 Unicode 编码的方式进行解决。
3. 建议使用的自动换行方法
以上三种方法都有其自身的特点和使用场景，如何选择使用哪一种方法呢？
推荐使用 white-space: pre-wrap;
该方法既能够保留空格、制表符和换行符，又能够在达到最大宽度时进行自动换行；
与其他两种方法相比，它更加完整地保留了元素中的内容；
使用 white-space: pre-wrap; 可以在 CSS 中实现像 word 文档一样的排版效果。
4. 总结
CSS 中实现文字自动换行的方法在实际开发中非常重要。根据不同的情况选择对应的属性可以将页面文字显示的更加精美，并且使得布局更加合理。在使用 white-space: pre-wrap; 时需要注意其换行符的保留问题，以确保内容显示的完整性。