Encadré de couleur avec une "codebox"

J'ai voulu utiliser mes "codebox" pour mettre en valeur du texte. Un encadré en quelque sorte.

Malheureusement, il n'y avait pas de retour à la ligne. C'est parfait quand il s'agit d'afficher du code comme plus bas (codebox bleue) mais cela devient pénible pour afficher du texte normal.

En fait, il suffit de supprimer les <pre> et </pre>, tout simplement. Ces balises <pre> servent  justement à afficher du code.

Exemple avec les <pre>. Pas de renvoi à la ligne. Les mots sont coupés et les lignes sont serrées.

MOUSTIQUES=DENGUE ou CHIKUNGUNYA. Attention! Veillez à ne pas laisser de récipients d'eau remplis sur vos terrasses (y compris les soucoupes des pots de fleurs) ! Pensez aussi à déboucher vos gouttières. Les bateaux doivent aussi être retournés ou le système auto-videur opérationnel.

Exemple sans les <pre>. Le renvoi à la ligne fonctionne, les mots ne sont pas coupés. On peut appliquer sans problème un alignement au texte comme ci-dessous: "justifié". Il est même possible d'y mettre une image sans tout casser... Une marge disgracieuse s'affiche sous l'image: allez dans le HTML et mettez margin-bottom: 1em;  à zéro: margin-bottom: 0em; et tout rentrera dans l'ordre.

MOUSTIQUES=DENGUE ou CHIKUNGUNYA. Attention! Veillez à ne pas laisser de récipients d'eau remplis sur vos terrasses (y compris les soucoupes des pots de fleurs) ! Pensez aussi à déboucher vos gouttières. Les bateaux doivent aussi être retournés ou le système auto-videur opérationnel.

Code d'origine (pour afficher du code) avec les <pre> en jaune. Il suffit de les supprimer pour que la phrase s'affiche normalement. Notez max-height: 26em; Si le texte est trop long, des scrollbars sont affichées automatiquement comme dans un iframe. Si vous voulez que les scrollbars ne s'affichent jamais mettez par exemple max-height: 100em; (ou plus).

<div class="codebox" style="background-color: #cc0000; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px solid rgb(173, 144, 96); margin: 9px 0.2em 1em; max-height: 26em; overflow: auto; padding: 0.3em 0.5em;">
<pre><span style="color: white; font-size: small;"><b>VOTRE TEXTE ICI</b></span></pre>
</div>