[分享]css中怎么自动换行

在网页设计中，我们常常需要对文本进行排版。然而，有时候文本的长度超出了预期，这时候就需要将文本进行自动换行。CSS中有一个属性叫做"wordwrap"，可以实现自动换行的效果。当文...

在网页设计中，我们常常需要对文本进行排版。然而，有时候文本的长度超出了预期，这时候就需要将文本进行自动换行。
CSS中有一个属性叫做"word-wrap"，可以实现自动换行的效果。当文本超过容器大小时，它会自动将单词拆分成多行，以避免出现水平滚动条。
以下是一个示例代码：

p{
  width: 300px; /* 容器的宽度 */
  word-wrap: break-word; /* 启用自动换行 */
} 

在这个示例中，我们通过设置p元素的宽度为300像素，并且启用了自动换行功能。当一个单词超过了这个宽度时，它会自动拆分成多行，以适应容器的大小。需要注意的是，浏览器会优先将整个单词放在一行上，只有在它不适合一行时，才会拆分成多行。
此外，还有一个属性叫做"overflow-wrap"，和"word-wrap"的作用是一样的，只不过它是CSS3中引入的，用法如下：

p{
  width: 300px; /* 容器的宽度 */
  overflow-wrap: break-word; /* 启用自动换行 */
} 

总之，自动换行是一种非常实用的文本排版方式，可以让文本更加美观和易读。在实际应用中，我们可以根据需要选择"word-wrap"或"overflow-wrap"属性来实现自动换行。