随着移动设备的普及，越来越多的网站和应用采用了 Flex 布局来实现页面布局。然而，在使用 Flex 布局时，经常会遇到文字换行的问题。本文将介绍 Flex 布局下的文字换行问题及解决方案。
问题描述
在使用 Flex 布局时，如果一个容器中的文字过长，会导致容器的宽度被撑开，从而影响页面的布局效果，如下图所示：
这种情况下，我们希望文字能够自动换行，但是默认情况下，Flex 布局并不会自动换行，而是会尽量将容器中的元素压缩到一行中显示。
解决方案
1. 使用 flex-wrap 属性
flex-wrap 属性可以控制 Flex 容器中的元素是否换行。默认情况下，flex-wrap 属性的值为 nowrap，即不换行。如果将 flex-wrap 属性的值设置为 wrap，那么容器中的元素就会自动换行。如下所示：
.container {
display: flex;
flex-wrap: wrap;
}使用 flex-wrap 属性可以解决文字过长导致容器撑开的问题，但是它会将容器中的元素平均分配到多行中，可能会导致某些行的高度不一致，从而影响页面的布局效果。
2. 使用 word-wrap 属性
word-wrap 属性可以控制在什么情况下允许单词内换行。默认情况下，word-wrap 属性的值为 normal，即不允许单词内换行。如果将 word-wrap 属性的值设置为 break-word，那么单词内就允许换行。如下所示：
.container {
display: flex;
}
.container p {
word-wrap: break-word;
}使用 word-wrap 属性可以解决文字过长导致容器撑开的问题，并且不会影响页面的布局效果。但是，如果单词内换行过于频繁，可能会影响用户的阅读体验。
3. 使用 overflow-wrap 属性
overflow-wrap 属性可以控制在什么情况下允许单词内换行。默认情况下，overflow-wrap 属性的值为 normal，即不允许单词内换行。如果将 overflow-wrap 属性的值设置为 break-word，那么单词内就允许换行。与 word-wrap 属性不同的是，overflow-wrap 属性不会在任意位置断开单词，只会在空格或连字符处断开单词。如下所示：
.container {
display: flex;
}
.container p {
overflow-wrap: break-word;
}使用 overflow-wrap 属性可以解决文字过长导致容器撑开的问题，并且不会影响用户的阅读体验。但是，如果单词内的连字符过多，可能会导致某些行的宽度不一致，从而影响页面的布局效果。
总结
在使用 Flex 布局时，如果遇到文字过长导致容器撑开的问题，可以使用 flex-wrap、word-wrap 或 overflow-wrap 属性来解决。其中，flex-wrap 属性会影响页面的布局效果，而 word-wrap 和 overflow-wrap 属性不会影响用户的阅读体验，但是可能会影响某些行的高度或宽度。需要根据具体情况选择合适的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a873695b1f8cacd4e0ca4