如何使此自动多行

Question

如何使这个自动多行

我正在使用HTML和CSS

这是我的代码（我稍微修改了一下，因为一些代码是来自PHP）：

<div style='border: 1px solid; padding: 10px;margin-top: 5px;'>
    <h2 style='margin: 0'>Name&nbsp-&nbsp#id</h2>
    <hr>
    <span>ContentContentContentContentContentContentContentContentContentContentContentContent</span>
</div><br>

如何将这些：

https://i.stack.imgur.com/tUPpO.png

https://i.stack.imgur.com/oCwuA.png

转换为这个（自动跳过一行）：

https://i.stack.imgur.com/PQxJS.png

Answer 1

你可以通过添加 word-wrap 和/或 overflow-wrap 来实现这一点

<div style='border: 1px solid; padding: 10px;margin-top: 5px; max-width:200px'>
    <h2 style='margin: 0'>Name&nbsp-&nbsp#id</h2>
    <hr>
    <span style='word-wrap: break-word; overflow-wrap: break-word;'>
        ContentContentContentContentContentContentContentContentContentContent</span>
</div><br>