CSS Brain teaser

Réponse au problème posé par @hteumeuleu Inspiré par les différentes propositions des lecteurs

by oilvier

HTML

<!doctype html>
<html>
    <head>
        <title>CSS Brain Teaser</title>
        <!-- 
            Un exercice rigolo proposé par HTeuMeuLeu
            http://www.hteumeuleu.fr        
        -->
    </head>
    <body>
        <h1>
            <span class="wrap">
                <span class="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span>
            </span>
        </h1>
    </body>
</html>

CSS

body { padding:50px; background:#2fa7ca; }
h1 { width:450px; font:bold 36px sans-serif; letter-spacing:-1px; color:#000; position:relative; padding:10px 20px; overflow:hidden;}

.wrap {outline:10px solid white; border:1px solid white; outline-offset:-1px;}
.inner {background:white; position:relative;}

JavaScript

/* On sépare en deux SPAN afin d'éviter que le texte ne soit coupé en haut et en bas de chaque ligne (à cause de outline) */