CSS: auto ajuster la largeur à l'emballage du contenu du texte?

Question

Comment ajuster la largeur d'un élément pour qu'il soit aussi large que son contenu, y compris lorsqu'une ligne de texte s'enroule en raison d'une largeur d'enveloppe externe fixe.

Avis dans cette FIDDLE que le fond jaune sur chaque div est bien ajusté à son contenu texte, sauf celui dont enveloppements texte, auquel cas, la largeur de cette div s'étend à la largeur de l'enveloppe extérieure.

Quelle est la solution?

<div class="wrapper"> 
    <div class="text">apple</div> 
    <div class="text">banana peels shouldn't be green</div> 
    <div class="text">kiwi</div> 
    <div class="text">orange</div> 
</div> 

Answer 1

C'est assez kludgy mais je pense que ça va faire ce que vous voulez:

.wrapper { 
 
    clear: both; 
 
    overflow: hidden; 
 
    width: 115px; 
 
} 
 

 
.text { 
 
    background: yellow; 
 
    display: inline; 
 
    margin-bottom: 3px; 
 
} 
 

 
.text:after { content: ' '; display: block; }

<div class="wrapper"> 
 
    <div class="text">apple</div> 
 
    <div class="text">banana peels shouldn't be green</div> 
 
    <div class="text">kiwi</div> 
 
    <div class="text">orange</div> 
 
</div>

Answer 2

Il n'existe aucune méthode CSS pour ajuster la largeur du bloc à la longueur du texte encapsulé. Donc, vous avez deux options:

1. Resort à text-align: justify. Dans ce cas, il enlèverait de l'espace vers la droite.
2. Utilisez JavaScript pour envelopper toutes les paroles de div dans span s, puis calculer coordonnée X (left par rapport au parent + width externe) de span avec la plus grande coordonnée X. Ensuite, en fonction de cette plus grande coordonnée X, vous devez définir padding-right ou width ou margin-right de votre bloc de destination.