Comment couper une chaîne pour l'adapter à la largeur d'une div?Couper une chaîne pour l'adapter à la largeur d'une div et ajouter trois points à la fin de la chaîne
Disons que j'ai une longue chaîne, comme "Anyone can help me to solve this problem" pour mettre dans un div 80px de large. Ce que je veux, c'est couper la chaîne pour qu'elle corresponde à la largeur de la div et ajouter "..." à la fin d'un mot, comme "Anyone can help me..."
Je ne suis pas certaine de savoir où couper la chaîne. Vous pourrait utiliser JavaScript pour couper les caractères un par un jusqu'à ce que la largeur est < = 80px, puis ajouter un ... mais je ne le recommanderais pas. Une meilleure façon serait de recadrer votre chaîne jusqu'à une longueur de sachez que sera plus long que 80px, alors avec CSS mettez overflow:hidden sur votre div, et superposez votre ... comme élément séparé et alignez à droite de la div. Il pourrait sembler légèrement éteint, mais je pense que c'est le mieux que vous puissiez faire. Gmail fait quelque chose comme ça. Ils le recadrent à un nombre prédéfini de personnages, claquent sur un ... et cachent tout ce qui est encore trop long.
Vous pouvez essayer d'utiliser CSS pour tronquer la chaîne avec une ellipse en utilisant des méthodes telles que this one by Justin Maxwell. Fondamentalement, pour faire fonctionner cross-browser, vous devez utiliser une combinaison de CSS standard, CSS spécifique au navigateur et du code XML. Le writeup complet peut être lu sur le lien ci-dessus, mais le produit final est:
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
combiné avec
<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="ellipsis">
<content>
<xul:window>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>
Puis décorer votre div avec la classe CSS = « points de suspension »
Touche. Je pense toujours que c'est un hack FF cependant: p – mpen
Mark, je suis complètement d'accord. –
Cela ressemble comme une copie possible de http://stackoverflow.com/questions/282758/truncate-a-string-nicely-to-fit-within-a-given-pixel-width – aem
Aussi, http://stackoverflow.com/questions/195408/limite-affichée-longueur-de-chaîne-sur-page-Web est très similaire, et un autre que j'ai vu hier, mais ne trouve pas w. – aem
duplicata possible de [Comment puis-je indiquer le texte long dans une colonne fixe plus petite avec CSS?] (Http://stackoverflow.com/questions/2108740/how-do-i-indicate-long-text-into-a-smaller -fixed-column-with-css) –