CSS换行

在CSS中实现换行是一个常见的需求，通常可以通过设置white-space属性、使用word-wrap或overflow-wrap属性以及调整display属性等方式来解决。几种实现换行的思路和方法。

1. 使用white-space属性

white-space属性可以控制元素内的空白如何处理。如果希望文本在到达容器边界时自动换行，可以将white-space设置为normal，这是默认值，表示文本会自动换行。

css div { white-space: normal; }

如果你发现文本没有正常换行，可能是因为white-space被设置成了nowrap，这会阻止文本换行，你需要将其改回normal或者其他的允许换行的值。

当一个单词太长以至于超出了容器宽度而不能正常换行时，可以使用word-wrap或overflow-wrap属性来强制这个单词换行。这两个属性实际上是同一个属性的不同名称（word-wrap是旧的名称），它们的作用是在需要的时候打断单词以实现换行。

css div { word-wrap: break-word; /* 或者 */ overflow-wrap: break-word; }

这会在单词超出容器宽度时，在任意位置打断单词进行换行。

如果你使用的是Flexbox布局，可能会遇到子元素不换行的情况。此时可以通过设置父容器的flex-wrap属性为wrap来允许子元素换行。

css
.container {
    display: flex;
    flex-wrap: wrap;
}</p>

<p>.item {
    flex: 0 0 auto; /* 不增长也不缩小 */
}

在这个例子中，.container是Flex容器，.item是其子元素。通过设置flex-wrap: wrap;，可以让子元素在一行放不下时换到下一行。

如果你想在换行时显示连字符，可以使用hyphens属性。这个属性可以指定是否在换行时插入连字符。

css div { hyphens: auto; }

这会在必要时在单词中间插入连字符并换行。

以上就是几种在CSS中实现换行的方法，根据实际需求选择合适的方式即可。

（本文来源：nzw6.com）