Comment indiquer un texte long dans une colonne fixe plus petite avec CSS?

Comment insérer du texte long dans une colonne de largeur fixe pour laquelle je n'ai de place que pour une seule ligne de texte? Le texte doit être coupé à une largeur fixe (disons à 100px) et je voudrais ajouter des points "..." à la fin. Quelque chose comme ceci par exemple:Comment indiquer un texte long dans une colonne fixe plus petite avec CSS?

chaîne donnée:

Some really long string that I need to fit in there!

sortie souhaitée en largeur colonne fixe doit être:

Some really long string...

Source

2010-01-21 Primoz Rome

Vous pouvez le faire avec CSS seul:

.box { 
    -o-text-overflow: ellipsis; /* Opera */ 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
    overflow:hidden;    /* don't show excess chars */ 
    white-space:nowrap;   /* force single line */ 
    width: 300px;     /* fixed width */ 
}

Note: Vous voulez vérifier sur le dernier support du navigateur.

Source

2010-01-21 12:12:17 Gordon

Cool! J'ai codé une solution de travail avant de voir votre réponse. https: //gist.github.com/708155 – geon

Ceci: "text-overflow: ellipsis;" est tout ce qui est nécessaire maintenant dans toutes les versions actuelles de IE, Opera, Firefox, Chrome & Safari, donc seulement besoin de la solution (et "-o-text-overflow:") pour le support des anciens navigateurs. – GazB

Qu'en est-il d'une solution de texte multiligne? Cela ne fonctionnera que pour une seule ligne de texte. Qu'est-ce que par exemple si j'ai une place pour 3 lignes de texte et que je baguette que '...' est ajouté à la dernière ligne où le texte est coupé? –

J'ai eu un problème similaire, la façon dont je l'ai résolu était pour réduire la chaîne à 60 caractères et ajouter un '...' à la fin de celle-ci.

Une solution laide? Oui, mais à moins qu'il n'y ait une solution jQuery, c'est probablement votre meilleur pari.

Si vous utilisez Smarty, voilà comment je résolu le problème:

{$my_string|truncate:60}

Source

2010-01-21 11:24:50

Voici une fonction que j'utilise pour tronquer les chaînes. Comme la plupart des suggestions ici, il utilise substr tronquer la chaîne, mais il évitera diviser la mi-mot chaîne:

function truncate_text($string, $min_chars, $append = ' &hellip;') { 
    $chars = strpos($string, " ", $min_chars); 
    $truncated_string = substr($string, 0, $chars) . $append; 
    return $truncated_rstring; 
}

Source

2010-01-21 11:46:48

Je pense texte simple de coupe après N caractères est pas ce que vous cherchez . Ce n'est pas une solution car le texte suivant a une longueur de 15 caractères: iiiiiiiiiiiiiii, mmmmmmmmmmmmmmm - notez que le second "mot" est environ trois fois plus long que le premier.

JavaScript pourrait être une solution:

d'abord préparer votre marge:
```
<p id="abc">{TEXT}</p> 
```
Où {TEXT} est votre texte tronqué à 150 caractères + ...

Maintenant, quand nous nous avons une bonne base pour JavaScript nous pouvons essayer de faire ce que vous cherchez:

<html> 
<head> 
    <style type="text/css"> 
     #abc { 
      width: 100px; 
     } 
    </style> 
    <script type="text/javascript"> 
     document.addEventListener("DOMContentLoaded", function() { 
      var ref = document.getElementById("abc"); 
      var text = ref.text; 

      ref.removeChild(ref.firstChild); 
      ref.appendChild(document.createTextNode("...")); 

      var maxHeight = ref.offsetHeight; 

      var pos = 0; 
      while (ref.offsetHeight <= maxHeight) { 
       var insert = text.substring(0, ++pos) + "..."; 

       var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild); 
      } 

      ref.replaceChild(finalReplace, ref.firstChild); 
     }, false); 
    </script> 
</head> 
<body> 
    <p id="abc">My very, very, very, very, very, very, very long text...</p> 
</body> 
</html>

Source

2010-01-21 11:48:21 Crozin

Juste avec CSS comme réponse de Gordon. Juste ajouté la propriété display:block pour un élément en ligne comme <a> ou <p>:

a#myText{ 
    display: block; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 300px; 
}

Vous pouvez l'utiliser avec beaucoup de navigateur comme vous pouvez le voir sur ce lien: http://caniuse.com/#search=text-overflow

Source

2014-09-04 10:39:50

Comment indiquer un texte long dans une colonne fixe plus petite avec CSS?

Répondre

Questions connexes