Comment rendre cela automatiquement multiligne

Question

Comment rendre cela automatiquement multiligne

J'utilise HTML et CSS

Voici mon code (je l'ai légèrement modifié car une partie du code provient de PHP) :

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

Comment les utiliser :

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

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

Convertir vers ceci (sauter automatiquement une ligne) :

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

Answer 1

Vous pouvez y parvenir en ajoutant 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>