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

Voici 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 se rétrécisse avec des points de suspension lorsque la fenêtre est réduite. Qu'ai-je fait de mal?

Vous devez avoir CSS overflow, width(ou max-width) 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 serrage de ligne (ellipses de débordement multiligne), consultez cette page CSS-Tricks: https://css-tricks.com/line-clampin/

Addendum2 (mai 2019)
Comme le dit ce lien , Firefox 68 prendra en charge -webkit-line-clamp(!)

Assurez-vous d'avoir un élément de bloc, une taille maximale et définissez 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 l'utilisation de plusieurs lignes dans Chrome:

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 corriger.

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;

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

<pre> </pre> 

marque

tout le reste n'a pas réussi à faire les points de suspension ....

Juste un heads-up pour tous ceux qui pourraient tomber dessus ... Mon h2 héritait

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

qui ne permettait pas les ellipses. Apparemment c'est très capricieux hein?

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;
 }

Pour plusieurs lignes

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

Vous pouvez également ajouter de la largeur dans votre CSS pour spécifier l'élément d'une certaine largeur:

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

<p class="multi-line-ellipsis">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.</p>

Vous pouvez essayer d'utiliser des points de suspension en ajoutant ce qui suit en CSS:

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

Mais il semble que ce code s'applique uniquement à la garniture d'une ligne. Vous trouverez plus de façons de rogner le texte et d'afficher les points de suspension sur ce site Web: http://blog.sanuker.com/?p=631

Ajoutez les lignes suivantes en 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;
   }

Pour ceux d'entre nous qui ne veulent pas utiliser de largeur fixe , cela fonctionne également en utilisant display: inline-grid. Ainsi, avec les propriétés requises, vous ajoutez simplementdisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}