Discussion :

[jawed84]

Bonjour,

j'ai un div avec bordure dans lequel j'ai placé une liste des lignes de textes, ces derniers dépassent la zone lors de leurs affichages.
y a t-il une solution, stp, afin de limiter la taille de ces textes et de remplacer la partie dépassante par des "...".

exemple:
xxx_xxxx@xxxx.xx ---> xxx_xxxx@x...

Merci

[c_s_s]

Bonjour,

Pour Internet Exploer, il existe la propriété text-overflow:ellipsis.
Malheureusement, elle n'est pas reconnue par Firefox.

Sinon, il existe des solutions JavaScript.

[jawed84]

Sinon, il existe des solutions JavaScript.

Merci bien pour vos reponses. Peux-tu c_s_s, stp, poster les solutions JavaScript?

Merci encore

[c_s_s]

Je te donne un exemple, il en existe sûrement beaucoup d'autres.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="truncateMe">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean consectetuer.</div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
var len = 30;
var p = document.getElementById('truncateMe');
if (p) {
  var trunc = p.innerHTML;
  if (trunc.length > len) {
 
    trunc = trunc.substring(0, len);
    trunc = trunc.replace(/\w+$/, '');
 
    trunc += '...';
    p.innerHTML = trunc;
  }
}
</script>

Pour que ça fonctionne, le script doit être placé après le texte qui doit être tronqué.

Dans l'exemple, le javascript va chercher le contenu du bloc ayant pour identifiant truncateMe et il tronque le texte après 30 caractères en ajoutant les points de suspension.

Tu peux évidemment définir le nombre de caractères que tu veux afficher.

[Damouille]

Je crois que ton texte déborder car il ne contient pas d'espace, sinon, il retournerait à la ligne naturellement.
Pour croper des textes et les remplacer par des ... ce n'est pas trop le role du css de faire ca.
Ca doit quand meme etre possible avec un truc comme ca.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div>
<p>Mon texte</p>
<p>Mon texte</p>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
div p {
width: 30px;
height: 12px; 
overflow: hidden; /* -- On définie une taille au dela de laquelle tout est caché -- */
}
div p:after {
content: '...'; /* -- On affiche des ... apres chaque ligne -- */
}

[c_s_s]

Rappelons quand même que le pseudo-élément :after ne fonctionne pas sur ce merveilleux navigateur qu'est Internet Explorer.

Et dans le cas décrit, l'inconvénient du pseudo-élément :after c'est que ça ajoute des points de suspension même lorsque le texte n'est pas tronqué.

[Damouille]

Cela fonctionne depuis IE7. Sinon il faut utiliser un background avec une image de ...

Quand au problème des .. qui sont ajouté inutilement, on touche en effet les limites du css. Ce genre de traitement devrait se faire en amont (xsl par exemple).

[c_s_s]

Cela fonctionne depuis IE7.

Tu es sûr ? Il me semblait que ça ne fonctionnait pas pour IE7 (compris) et version antérieures.
Pour IE8, c'est supporté tant que le content n'est pas une image.

Sinon je te rejoins, il vaut mieux faire le traitement avant avec des langages qui le permettent.

[Damouille]

Tu es sûr ? Il me semblait que çe fonctionnait pas pour IE7 (compris) et version antérieures.

Ca marche sur mon IE mais je suis peut etre passé à la version 8 sans m'en rendre compte.
Pour etre sur il faut aller sur cette page avec le navigateur concerné. Avec FF3 c'est le sans faute.