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?
OriginalL'auteur Emphram Stavanger | 2013-01-07
Vous devez vous connecter pour publier un commentaire.
Cela peut certainement, et devrait être fait en CSS. Appliquer une largeur fixe et fixe la hauteur de la première travée. La hauteur de la garde de la, qui s'étendent à plusieurs lignes. L' .collant span alors peut être positionné par la suite. Cela peut être fait même de fluide, à l'aide de pourcentages ou les ems. Quelque chose à considérer, je ne connais pas le contexte de la 'ABC', 'DEF', mais ils peuvent au mieux être appliqué à l'aide d'une :ou avant :après la pseudo classe si elles sont purement visuelle, et pas des éléments de structure.
Voici un exemple rapide:
Si vous voulez voir ce travail sur un site, j'ai fait ce dessin sur moolta.com. Cliquez sur "créer un challenge" et ouvrir le modal pour choisir un ami. Le li est à l'intérieur de la liste déroulante sont de quoi je parle. Ils devaient devenir des elipsis et disposent d'un bouton suivre, sans casser des lignes
max-width
pour la premièrespan
en fonction de la largeur de ladiv
et le contenu réel de la largeur desticky
, le manque d'une fonctionnalité similaire dans le CSS. Mais c'est un excellent début.Trafiqué autour pour créer cette; jsfiddle.net/GEzXU - opinions sur la façon intelligente de cette approche sont les bienvenus.
Est-il un moyen de faire ce travail à l'aide d'une dynamique de la largeur de la div extérieure?
OriginalL'auteur DMTintner
OriginalL'auteur Mikhail Vladimirov