Passer à une nouvelle ligne avec inline-block ?

Question

Je souhaite supprimer le <br /> et de créer des lignes de rupture par le biais de CSS. Si je change les travées en display:block la largeur sera de 100% et j'ai besoin que la largeur soit exactement égale à la longueur du texte, comme c'est le cas actuellement. Des suggestions ?

<div class="fullscreen">
    <p class="text">
        <span class="medium">We</span> <br />
        <span class="large">build</span> <br />
        <span class="medium">the</span> <br />
        <span class="large">Internet</span>
    </p>
</div>

.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }

Fiddle

Answer 1

Si vous ne voulez pas que l'élément occupe toute la ligne, il suffit de le faire flotter à gauche.

.text span {
       background:rgba(165, 220, 79, 0.8);
       float: left;
       clear: left;
       padding:7px 10px;
       color:white;
    }

Note:Retirer <br/> avant de l'utiliser.

Answer 2

Si vous êtes d'accord pour ne pas utiliser <p> (seulement <div> et <span> ), cette solution pourrait même vous permettre d'aligner vos inline-block au centre ou à droite, si vous le souhaitez (ou gardez-les simplement à gauche, comme vous l'avez demandé à l'origine). Bien que la solution puisse encore fonctionner avec <p> je ne pense pas que le code HTML qui en résulterait serait tout à fait satisfaisant. correctes mais c'est à vous de décider.

L'astuce consiste à envelopper chacun de vos <span> avec un <div> . De cette façon, nous profitons du saut de ligne causé par la balise <div> 's display: block (par défaut), tout en gardant le cadre vert visuel proche des limites du texte (avec votre display: inline-block déclaration).

.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.large {  font-size:80px }

<div class="text">
  <div><span class="medium">We</span></div>
  <div><span class="large">build</span></div>
  <div><span class="medium">the</span></div>
  <div><span class="large">Internet</span></div>
</div>