Dynamique de la largeur maximale pour le texte

Donc, disons que j'ai de ce balisage;

<div>
  <span>Text one</span>
  <span class="sticky">ABC</span>
</div>
<div>
  <span>Some other text</span>
  <span class="sticky">DEF</span>
</div>
<div>
  <span>Lorem dolor sit amet lorem ipsum dolor</span>
  <span class="sticky">GHI</span>
</div>

Qui - avec accompagnement de CSS - d'obtenir un résultat comme sur la photo ci-dessous.

Cependant, le problème se produit lorsque le texte dans la première span est plus long que celui alloué à la largeur de la div. Régulièrement ce qui se passe est tout à fait normal d'habillage de texte; la deuxième span est repoussé à la fin de la deuxième ligne.

Cependant, je veux que cet élément soit plus qu'une seule ligne. Maintenant, bien sûr, pour ce faire, vous n';

white-space: nowrap;
overflow: hidden;

Mais alors ce qui se passe est la deuxième span disparaît dans l'oubli, comme il est chassé par la longueur du texte dans la première span.

Ce que je veux réaliser est ce que l'on voit dans le troisième exemple ci-dessous. Lorsque le contenu de la première span est trop long pour être affiché, text-overflow: ellipsis; serait de couper la corde avec un point-point-point, et le second span serait poussé jusqu'à la bordure de droite (padding de la div permettant).

Essentiellement, le pseudo-max-width de la première span serait égale à la largeur de la div, à l'exclusion de ses padding et déduction faite de la largeur de span.sticky, quel qu'il soit (le contenu peut varier, de sorte que la largeur n'est pas défini).

Je ne sais pas si max-width est en fait la voie à suivre lorsque l'approche de quelque chose comme cela, mais c'est ce que je peux utiliser pour décrire au mieux le comportement que je veux.

Est-il un non-JS méthode de réalisation de cette?

Dynamique de la largeur maximale pour le texte

OriginalL'auteur Emphram Stavanger | 2013-01-07