How to make this automatically multiline

Question

How to make this automatically multi-line

I'm using HTML and CSS

This is my code (I modified it slightly since some of the code is from PHP):

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

How to use these:

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

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

Convert to this (automatically skip a line):

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

Answer 1

You can achieve this by adding word-wrap and/or 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>