mit

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

"..." wird am Ende der Zeile angezeigt, wenn es übergelaufen ist. Dies wird jedoch nur in einer Zeile angezeigt. Aber ich möchte, dass es mehrzeilig angezeigt wird.

Es kann aussehen wie:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

Es gibt auch mehrere JQuery-Plugins, die sich mit diesem Problem befassen, aber viele verarbeiten nicht mehrere Textzeilen. Folgende Arbeiten:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

Es gibt auch einige Tests preformance .

Ich habe herumgehackt, bis ich es geschafft habe, etwas in der Nähe davon zu erreichen. Es kommt mit ein paar Einschränkungen:

1. Es ist kein reines CSS; Sie müssen einige HTML-Elemente hinzufügen. Es ist jedoch kein JavaScript erforderlich.
2. Die Ellipse ist in der letzten Zeile rechtsbündig. Dies bedeutet, dass, wenn Ihr Text nicht rechtsbündig oder gerechtfertigt ist, möglicherweise eine merkliche Lücke zwischen dem letzten sichtbaren Wort und den Auslassungspunkten besteht (abhängig von der Länge des ersten versteckten Wortes).
3. Der Platz für die Auslassungspunkte ist immer reserviert. Dies bedeutet, dass der Text, wenn er fast genau in das Feld passt, möglicherweise unnötig abgeschnitten wird (das letzte Wort wird ausgeblendet, obwohl dies technisch nicht erforderlich wäre).
4. Ihr Text muss eine feste Hintergrundfarbe haben, da wir farbige Rechtecke verwenden, um die Auslassungspunkte in Fällen auszublenden, in denen sie nicht benötigt werden.

Ich sollte auch beachten, dass der Text an einer Wortgrenze und nicht an einer Zeichengrenze unterbrochen wird. Dies war absichtlich (da ich das für längere Texte für besser halte), aber weil es sich von dem unterscheidet, was es text-overflow: ellipsistut, dachte ich, ich sollte es erwähnen.

Wenn Sie mit diesen Einschränkungen leben können, sieht der HTML-Code folgendermaßen aus:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

Dies ist das entsprechende CSS am Beispiel eines 150 Pixel breiten Felds mit drei Textzeilen auf weißem Hintergrund. Es wird davon ausgegangen, dass Sie einen CSS-Reset oder ähnliches haben, bei dem Ränder und Auffüllungen bei Bedarf auf Null gesetzt werden.

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

Das Ergebnis sieht folgendermaßen aus:

Um zu verdeutlichen, wie es funktioniert, sehen Sie hier dasselbe Bild, außer dass .hidedots1es rot hervorgehoben ist, und.hidedots2 Cyan hervorgehoben ist. Dies sind die Rechtecke, die die Auslassungspunkte verbergen, wenn kein unsichtbarer Text vorhanden ist:

Getestet in IE9, IE8 (emuliert), Chrome, Firefox, Safari und Opera. Funktioniert nicht in IE7.

Hier ist ein kürzlich veröffentlichter Artikel über CSS-Tricks, in dem dies erläutert wird.

Einige der Lösungen im obigen Artikel (die hier nicht erwähnt werden) sind

1) -webkit-line-clampund 2) Platzieren Sie ein absolut positioniertes Element mit Ausblenden unten rechts

Beide Methoden setzen das folgende Markup voraus:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

mit css

.module {
  width: 250px;
  overflow: hidden;
}

1) -Webkit-Line-Clamp

Line-Clamp FIDDLE (..für maximal 3 Zeilen)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) Ausblenden

Angenommen, Sie setzen die Zeilenhöhe auf 1.2em. Wenn wir drei Textzeilen verfügbar machen möchten, können wir einfach die Höhe des Containers auf 3.6em (1.2em × 3) festlegen. Der versteckte Überlauf verbirgt den Rest.

FIDDLE ausblenden

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Lösung 3 - Eine Kombination mit @supports

Wir können @supports verwenden, um die Zeilenklemme des Webkits auf Webkit-Browser anzuwenden und das Ausblenden in anderen Browsern anzuwenden.

@ unterstützt Line-Clamp mit Fade-Fallback-Geige

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

Der folgende Link bietet eine reine HTML / CSS-Lösung für dieses Problem.

Browserunterstützung - wie im Artikel angegeben:

Bisher haben wir Safari 5.0, IE 9 (muss sich im Standardmodus befinden), Opera 12 und Firefox 15 getestet.

Ältere Browser funktionieren immer noch recht gut, da das Fleisch des Layouts normale Positionierungs-, Rand- und Polsterungseigenschaften aufweist. Wenn Ihre Plattform älter ist (z. B. Firefox 3.6, IE 8), können Sie die Methode verwenden, den Verlauf jedoch als eigenständiges PNG-Bild oder DirectX-Filter wiederholen.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

das css:

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

das HTML:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

das Geige

(Ändern Sie die Größe des Browserfensters zum Testen)

Nachdem ich die W3-Spezifikation auf Textüberlauf überprüft habe , denke ich nicht, dass dies nur mit CSS möglich ist. Ellipsis ist eine neue Eigenschaft, daher hat sie wahrscheinlich noch nicht viel Nutzung oder Feedback erhalten.

Dieser Typ scheint jedoch eine ähnliche (oder identische) Frage gestellt zu haben, und jemand konnte eine nette jQuery-Lösung finden. Sie können die Lösung hier vorführen: vorführen http://jsfiddle.net/MPkSF/

Wenn Javascript keine Option ist, haben Sie möglicherweise kein Glück ...

Ich möchte diese Frage nur der Vollständigkeit halber ergänzen.

• Opera unterstützt diese standardmäßige -o-ellipsis-lastline nicht standardmäßig .
• dotdotdot ist ein großartiges jQuery-Plugin, das ich empfehlen kann.

Tolle Frage ... Ich wünschte, es gäbe eine Antwort, aber dies ist die beste, die Sie heutzutage mit CSS erreichen können. Keine Auslassungspunkte, aber immer noch ziemlich brauchbar.

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

Ich habe diese CSS (SCS) -Lösung gefunden, die recht gut funktioniert. In Webkit-Browsern werden die Auslassungspunkte angezeigt und in anderen Browsern wird nur der Text abgeschnitten. Welches ist in Ordnung für meinen Verwendungszweck.

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Ein Beispiel des Erstellers: http://codepen.io/martinwolf/pen/qlFdp

Hier ist die nächste Lösung, die ich mit CSS bekommen könnte.

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Working Fiddle ( Größe des Fensters ändern, um zu überprüfen )

Link zu meinem Blog zur Erklärung

Geige aktualisiert

Ich hoffe, jetzt hätte ein CSS-Experte eine Idee, wie man es perfekt macht. :) :)

Hier gibt es viele Antworten, aber ich brauchte eine, die war:

• Nur CSS
• Zukunftssicher (wird mit der Zeit kompatibler)
• Wörter werden nicht auseinander gebrochen (nur auf Leerzeichen)

Die Einschränkung ist, dass es keine Auslassungspunkte für die Browser bietet, die die -webkit-line-clampRegel nicht unterstützen (derzeit IE, Edge, Firefox), aber einen Verlauf verwendet, um ihren Text auszublenden.

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Sie können es in diesem CodePen in Aktion sehen und Sie können hier auch eine Javascript-Version sehen (keine jQuery).

Etwas spät zu dieser Party, aber ich habe mir eine einzigartige Lösung ausgedacht. Anstatt zu versuchen, Ihre eigenen Auslassungspunkte durch CSS-Tricks oder JS einzufügen, dachte ich, ich würde versuchen, mit der Einschränkung nur für eine einzelne Zeile zu rollen. Also dupliziere ich den Text für jede "Zeile" und verwende einfach einen negativen Texteinzug, um sicherzustellen, dass eine Zeile dort beginnt, wo die letzte aufhört. GEIGE

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

Weitere Details in der Geige. Es gibt ein Problem mit dem fließenden Browser, für das ich ein JS-Redraw verwende. Überprüfen Sie es also, aber dies ist das Grundkonzept. Alle Gedanken / Vorschläge werden sehr geschätzt.

danke @balpha und @Kevin, ich kombiniere zwei Methoden miteinander.

Bei dieser Methode werden keine js benötigt.

Sie können verwenden background-imageund es ist kein Farbverlauf erforderlich, um Punkte auszublenden.

das innerHTMLvon .ellipsis-placeholderist nicht notwendig, ich benutze .ellipsis-placeholderum die gleiche Breite und Höhe mit zu halten .ellipsis-more. Sie könnten display: inline-blockstattdessen verwenden.

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

Javascript-Lösung wird besser sein

• Holen Sie sich die Zeilennummer des Textes
• Toggle - is-ellipsisKlasse , wenn die Größe des Fensters oder elment Änderung

getRowRects

Element.getClientRects()funktioniert so

jeweils Rects in der gleichen Zeile das gleiche hat topWert, findet so den Rects mit unterschiedlichem outem topWert, wie dies

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

schweben ...more

wie diese

Fenstergröße ändern oder Element geändert

wie diese

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 

Weitere Informationen finden Sie hier

Eine reine CSS-Methode, die auf -webkit-line-clamp basiert:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Ich habe einen Javascript-Trick gefunden, aber Sie müssen die Länge der Zeichenfolge verwenden. Nehmen wir an, Sie möchten 3 Zeilen mit einer Breite von 250 Pixel. Sie können die Länge pro Zeile berechnen, dh

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}