débordement de texte: les points de suspension ne fonctionnent pas

C’est ce que j’ai essayé (voir ici ):

body { overflow: hidden; } span { border: solid 2px blue; white-space: nowrap; text-overflow: ellipsis; } 

Essentiellement, je veux que la plage diminue avec les points de suspension lorsque la fenêtre est réduite. Qu’ai-je fait de mal?

Vous devez avoir un overflow CSS, une width , un display et white-space .

http://jsfiddle.net/HerrSerker/kaJ3L/1/

 span { border: solid 2px blue; white-space: nowrap; text-overflow: ellipsis; width: 100px; display: block; overflow: hidden } 

Addendum Si vous souhaitez un aperçu des techniques de bridage de ligne (Ellipse de débordement multiligne), consultez cette page des astuces CSS: https://css-sortingcks.com/line-clampin/

Assurez-vous d’avoir un élément de bloc, une taille maximale et de définir le débordement sur caché. (Testé dans IE9 et FF 7)

http://jsfiddle.net/uh9zD/

 div { border: solid 2px blue; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 50px; } 

Pour plusieurs lignes dans Chrome, utilisez:

 display: inline-block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; // max nb lines to show -webkit-box-orient: vertical; 

Inspiré de YouTube 😉

J’avais un problème avec les points de suspension sous chrome. Activer l’espace blanc: Nowrap semblait le réparer.

 max-width: 95px; max-height: 20px; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: solid 1px black; font-size: 12pt; text-align: right; white-space: nowrap; 
 word-wrap: break-word; 

ceci et seulement cela a fait le travail pour moi pour un

 
 

marque

Tout le rest n’a pas réussi à faire les points de suspension ….

Ajoutez ce code ci-dessous pour savoir où vous voulez

Exemple

 p{ display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 400px; margin: 0 auto; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 

Juste un tête-à-tête pour quiconque pourrait trébucher à ce sujet … Mon h2 héritait

 text-rendering: optimizelegibility; //Changed to text-rendering: none; for fix 

ce qui ne permettait pas les points de suspension. Apparemment, c’est très finick hein?

Vous pouvez essayer d’utiliser les points de suspension en ajoutant les éléments suivants dans CSS:

 .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

Mais il semble que ce code s’applique simplement à une ligne. Vous trouverez d’autres moyens de découper du texte et d’afficher les points de suspension sur ce site Web: http://blog.sanuker.com/?p=631

Pour plusieurs lignes

En chrome, vous pouvez appliquer ce script si vous devez appliquer des points de suspension sur plusieurs lignes.

Vous pouvez également append de la largeur dans votre css pour spécifier un élément d’une certaine largeur:

 .multi-line-ellipsis { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ajoutez les lignes suivantes dans CSS pour que les points de suspension fonctionnent

  p { display: block; // change it as per your requirement overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }