如何使此自動多行

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>ContentContentContentContentContentContentContentContentContentContentContent</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>