Textüberlauf: Auslassungspunkte funktionieren nicht

Folgendes habe ich versucht (siehe hier ):

body {
    overflow: hidden;
}

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

Im Wesentlichen möchte ich, dass die Spanne mit Auslassungspunkten verkleinert wird, wenn das Fenster klein gemacht wird. Was habe ich falsch gemacht?

Sie benötigen CSS overflow, width(oder max-width) display, und 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
}

Nachtrag Wenn Sie einen Überblick über Techniken zum Festklemmen von Leitungen (mehrzeilige Überlaufellipsen) wünschen, besuchen Sie diese CSS-Tricks-Seite: https://css-tricks.com/line-clampin/

Addendum2 (Mai 2019)
Wie dieser Link behauptet, wird Firefox 68 -webkit-line-clamp(!) Unterstützen.

Stellen Sie sicher, dass Sie ein Blockelement und eine maximale Größe haben, und setzen Sie den Überlauf auf ausgeblendet. (Getestet in IE9 und FF 7)

http://jsfiddle.net/uh9zD/

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

Für mehrere Zeilen in Chrome verwenden Sie:

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

Inspiriert von Youtube ;-)

Ich hatte ein Problem mit Auslassungspunkten unter Chrom. White-Space einschalten: Nowrap schien das Problem zu beheben.

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;

dies und nur das hat mir den Job gemacht

<pre> </pre> 

Etikett

alles andere konnte die Auslassungspunkte nicht erfüllen ....

Nur ein Headsup für jeden, der darüber stolpern könnte ... Mein h2 hat geerbt

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

das erlaubte keine Auslassungspunkte. Anscheinend ist das sehr schwierig, oder?

Fügen Sie diesen Code unten hinzu, wo Sie möchten

Beispiel

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

Für mehrere Zeilen

In Chrome können Sie dieses CSS anwenden, wenn Sie Auslassungspunkte auf mehrere Zeilen anwenden müssen.

Sie können Ihrem CSS auch eine Breite hinzufügen , um ein Element mit einer bestimmten Breite anzugeben:

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

Sie können versuchen, Auslassungspunkte zu verwenden, indem Sie Folgendes in CSS hinzufügen:

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

Es scheint jedoch, dass dieser Code nur für einzeiliges Trimmen gilt. Weitere Möglichkeiten zum Trimmen von Text und Anzeigen von Auslassungspunkten finden Sie auf dieser Website: http://blog.sanuker.com/?p=631

Fügen Sie die folgenden Zeilen in CSS hinzu, damit die Auslassungspunkte funktionieren

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

Für diejenigen von uns, die keine feste Breite verwenden möchten funktioniert es auch mit display: inline-grid. Zusammen mit den erforderlichen Eigenschaften fügen Sie einfach hinzudisplay

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