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

Supprimer tout br balises et utilisation display: table .

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

Explication : Le tableau couvre la largeur de son contenu par défaut sans définir de largeur, mais il s'agit toujours d'un élément de niveau bloc. Vous pouvez obtenir le même comportement en définissant une largeur pour d'autres éléments de niveau bloc :

<span style="display:block;border:1px solid red;width:100px;">Like a default table.</span>
<code>null</code>

Notez que les <code> n'est pas en ligne avec l'élément <span> comme il le ferait normalement. Vérifiez-le avec les styles calculés dans vos outils de développement. Vous verrez une pseudo marge à droite de l'élément <span> . Quoi qu'il en soit, c'est la même chose que le tableau, mais le tableau a l'avantage supplémentaire de toujours s'adapter à la largeur de son contenu.

Answer 2

Utiliser float: left; y clear: left;

http://jsfiddle.net/rtM6J/

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

Answer 3

Placer les éléments dans display: inline et utiliser :after :

.text span { display: inline }
.break-after:after { content: '\A'; white-space:pre; }

et ajoutez la classe dans vos travées html :

<span class="medium break-after">We</span>

Answer 4

Je pense que la meilleure façon de le faire en 2018 est d'utiliser flexbox.

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* same as original below */
.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }

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

Answer 5

Voici une autre solution (seules les déclarations pertinentes sont listées) :

.text span {
   display:inline-block;
   margin-right:100%;
}

Lorsque la marge est exprimée en pourcentage, ce pourcentage est calculé à partir de la largeur du nœud parent. Ainsi, 100 % signifie que la marge est aussi large que le nœud parent, ce qui a pour effet de "pousser" l'élément suivant sur une nouvelle ligne.