html内容超出了div的宽度如何换行让内容自动换行

当HTML内容超出div的宽度时，可以通过设置CSS属性来让内容自动换行并显示在多个行内。下面是具体的攻略：

1. 设置CSS white-space属性

将white-space属性的值设置为“normal”或“pre-wrap”即可让内容自动换行：

div{
  white-space: normal; /*或者pre-wrap*/
}

其中，“normal”值是由默认值“normal normal”简写得来，它表示元素内容不会破坏换行规则。而“pre-wrap”值则表示元素内容按照原样展示，但是超出div范围时会自动换行。

下面是一个示例：

<div style="width: 200px; border: 1px solid;">
  This is a super long text that needs to wrap in a div element without overflowing or breaking the layout.
</div>

设置样式后，上述代码将会在超出了200px的地方自动换行。

2. 使用CSS word-wrap属性

word-wrap属性是另一种让HTML内容自动换行的方法。将其设置为“break-word”即可让长单词自动换行：

div{
  word-wrap: break-word;
}

下面是一个示例：

<div style="width: 200px; border: 1px solid;">
  ThisIsAVeryLongWordThatNeedsToBeBrokenButShouldNotALterTheWholePage.
</div>

可以看到，如果不设置CSS word-wrap属性，整个单词会撑满整个div并且无法自动换行，而使用“break-word”值后，长单词会在div宽度范围内自动换行。

综上所述，以上两种方法都可以实现HTML内容超出div的宽度时自动换行。具体选择哪种方法取决于具体应用场景。