CSS - Faire de DURÉE de prolonger à la fin de son conteneur / remplir l'espace vide?
J'ai la suite de la mise en page HTML pour un site web (alimenté par des Solutions de Réseau nsCommerceSpace) je suis en train de concevoir un thème pour:
<div id="ctl00_breadcrumb" class="breadcrumb">
<span id="ctl00_breadcrumbContent">
<span><a href="/">[Name of Webstore]</a></span>
<span> > </span>
<span><a href="/page.aspx">Page</a></span>
<span> > </span>
<span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
</span>
</div>
Les balises span avec <span> > </span>
sont générés automatiquement pour séparer chaque élément.
Ici est un Violon de mon problème: http://jsfiddle.net/5fvmJ/
Est-il un moyen pour moi de faire la dernière balise SPAN remplir l'espace vide, et juste à la fin quand il frappe le côté droit? Je voudrais juste utiliser overflow: hidden;
pour masquer le texte supplémentaire.
Des idées? Je sais avoir tous SPAN rend cela difficile, mais il est intégré dans les fonctionnalités du site que je ne peux pas changer.
OriginalL'auteur Devin | 2012-08-14
Vous devez vous connecter pour publier un commentaire.
Je crois que j'ai trouvé un pur CSS solution. Vous ne manquait que deux choses:
display: inline-block
dans le<span>
balises sansfloat: left
, flottantes, est en fait contradictoire avec inline-block éléments.white-space: nowrap
dans le parent<div>
.De cette façon, vous n'avez pas besoin de spécifier une largeur de quoi que ce soit. 🙂
JSFiddle démo
http://jsfiddle.net/yz9TK/
CSS
(J'ai nettoyé un peu)
Content d'avoir pu aider 🙂
OriginalL'auteur depa
Ce span class a fait le tour pour moi...
Essentiellement utilisé comme cela...
OriginalL'auteur jday
Essayer le style de l'envergure avec
display:block
EX:<span style="display:block"> Here is a... </span>
Ne pas faire de changement lorsqu'il est utilisé conjointement avec overflow:hidden ? Le but de display:block est de forcer la durée d'agir davantage comme une div
Nope. jsfiddle.net/d2Tc7 Pas ce que je peux voir.
Ce n'est pas une solution totale, mais il peut fonctionner comme un correctif? Ajouter display:block vous permet de définir une largeur fixe pour la durée de... toujours pas sûr de savoir pourquoi débordement ne fonctionne pas dans votre exemple sur le Violon
Oh, bien avec une largeur spécifiée, il fonctionne, mais c'est mon problème... je n'ai pas de valeur, je peux le mettre à, car il a toujours besoin d'être différents puisque les titres des pages et les catégories sont de longueurs différentes.
OriginalL'auteur aeternus828
Deux types de réponses, à la fois pas grand:
http://jsfiddle.net/5fvmJ/14/: Définir un
max-width
pour la dernière travée, assurez-vous que le fond ne saute pas. Vous devriez alors assurez-vous que le texte ne tombe pas.Sans toute la largeur de changer, d'obtenir les dimensions du texte, et de n'afficher que les sous-chaîne avec
...
ajoutés, ce qui reste à l'intérieur de la barre: http://jsfiddle.net/5fvmJ/19/. Vous devriez le faire de façon dynamique. ( Calculer la largeur du texte avec JavaScript)2) vous ne savez Pas si cela peut être fait avec du JavaScript ou jQuery? Le serveur ne peut pas prendre tout le code côté serveur... uniquement côté client.
Voir le lien dans le modifier à 2., et pour 1: vous n'êtes pas de réglage de largeur, mais un max-width. Si le texte est plus petite que la largeur, elle se fit normalement.
Droit, mais si j'ai une catégorie appelée "Catégorie" la largeur doit être plus grande que si elle était "Très Longtemps Catégorie". Maintenant, le texte serait de sauter à nouveau. DONC j'ai fais le max-width être le max-width de l'espace lorsque la catégorie est à son plus grand, mais alors si j'ai un court titre de la catégorie, le titre de la page serait garni de beaucoup de choses, et aurait beaucoup de gaspillage d'espace libre. J'espère que vous comprenez ce que j'essaie d'expliquer.
Aah! Oui, je comprends maintenant, vous voulez ajouter plus d'éléments à l'origine le long de l'élément. Encore une fois, je pense que la deuxième option est la meilleure: déterminer la largeur du texte, si c'est trop long de faire plus court et ajouter
...
.OriginalL'auteur Hidde
Vous n'avez pas besoin de spécifier la largeur.
Ajouter simplement 'display:block; float:none;" à la classe css.
Vous pouvez ajouter des "overflow:hidden" si vous n'aimez pas le exceding texte de départ d'une nouvelle ligne.
OriginalL'auteur paolo