CSS-Auslassungspunkte in der zweiten Zeile

207

CSS text-overflow: ellipsisin der zweiten Zeile, ist das möglich? Ich kann es nicht im Netz finden.

Beispiel:

was ich will ist wie folgt:

I hope someone could help me. I need 
an ellipsis on the second line of...

aber was passiert ist folgendes:

I hope someone could help me. I ... 
Reigel
quelle
3
AFAIK die Ellipse erscheint und schneidet den Text am Ende der Breite des Elements ab. Es fließt nicht in die nächste Zeile. Die beste Lösung wäre hier die Implementierung eines serverseitigen oder clientseitigen Skripts, das den Text automatisch auf eine bestimmte Anzahl von Zeichen zuschneidet und dann die Auslassungspunkte anfügt. Ich vermute, ein clientseitiges Skript wäre besser, damit Sie bei Bedarf immer noch den gesamten Originaltext zur Verfügung haben.
FarligOpptreden
Hier ist eine ähnliche Frage: stackoverflow.com/questions/3922739/…
Evgeny
tl; dr: es ist nur im Webkit möglich
Evgeny
Am nächsten kam ich dazu, ein 'Nachher'-Pseudoelement für die Ellipse hinzuzufügen und es direkt hinter dem Element, das den Text enthält, inline zu positionieren. Die Auslassungspunkte verschwinden jedoch, wenn der Elementtext zu lang ist. Sie müssten den Text also irgendwie zuschneiden, um dies zuverlässig zu machen.
Jonathan

Antworten:

105

Voraussetzung für die text-overflow: ellipsis;zur Arbeit ist eine einzeilige Version white-space( pre, nowrapusw.). Dies bedeutet, dass der Text niemals die zweite Zeile erreicht.

Ergo. In reinem CSS nicht möglich.

Meine Quelle, als ich gerade genau das Gleiche suchte: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

BEARBEITEN Wenn die guten CSS-Götter http://www.w3.org/TR/css-overflow-3/#max-lines implementieren , können wir dies in reinem CSS mit fragments(neu) und max-lines(neu) gefährden . Weitere Informationen finden Sie unter http://css-tricks.com/line-clampin/.

EDIT 2 WebKit / Blink hat line-clamp: -webkit-line-clamp: 2setzt Auslassungspunkte in die 2. Zeile.

Rudie
quelle
9
Wache halten, aber bisher scheinen die Götter noch nicht bei uns zu sein: caniuse.com/#search=max-lines
Daniel
1
Wie erreicht man das oben genannte Merkmal mit Saas? @ Rudie
Bhoomi Bhalani
144

Dies sollte in Webkit-Browsern funktionieren :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
Skeep
quelle
1
Beachten Sie, dass ab diesem Kommentar -webkit-line-clamp die Sichtbarkeit nicht berücksichtigt: versteckt. bugs.webkit.org/show_bug.cgi?id=45399
Kevin
1
Hey - scheint nett zu sein, funktioniert aber nicht für mich. Es setzt einfach '...' an der angegebenen Linienklemme, schneidet aber nicht den Rest des Textes (auch nicht mit Leerzeichen)
Lemoid
3
Möglicherweise müssen Sie hinzufügen, overflow: hiddendamit dies funktioniert.
Robert
Dies wird nicht in Firefox funktionieren, Webkit nicht in Gecko Engine unterstützt
ZetaPR
Dies sollte die akzeptierte Antwort sein. Sie möchten auch keine Auffüllung am unteren Rand des Elements, auf das Sie dies anwenden, da Sie den Rest des Textes durchschauen können.
Tr1stan
34

Wie andere bereits geantwortet haben, gibt es keine reine CSS-Lösung. Es gibt ein sehr einfach zu verwendendes jQuery- Plugin namens dotdotdot . Es verwendet die Breite und Höhe des Containers, um zu berechnen, ob Ellipsen abgeschnitten und hinzugefügt werden müssen.

$("#multilinedElement").dotdotdot();

Hier ist eine jsFiddle .

Giohji
quelle
Dieses Plugin bietet auch viele andere Dienstprogramme wie das Hinzufügen von "Read More" -Links. Es kann auch URIs und HTML-Markups analysieren. Guter Fund!
Martin Andersson
2
Ich habe jQuery dotdotdot 1.7.3 für einen E-Commerce-Shop ausprobiert, um die Produktnamen auf einer Rasterkategorieseite auf zwei Zeilen zu beschränken. Nach gründlichen Tests haben wir uns entschieden, dieses Plugin nicht zu verwenden, da manchmal nach einer Schichtaktualisierung das Kategorieseitenlayout beschädigt wurde. YMMV. Am Ende haben wir uns für eine sehr einfache Vanilla JS-Lösung entschieden: Wenn die clientHeight des Produktnamenelements kleiner als die scrollHeight ist, schneiden Sie den Text an einer voreingestellten Grenze ab und fügen Sie "..." hinzu. Manchmal können einige Produktnamen aufgrund der voreingestellten Grenze etwas zu kurz sein, aber es ist super stabil.
2.
1
Easty zu implementieren und funktioniert wunderbar. Danke dir!
Rachel S
Obwohl es gut funktioniert, leidet es leider unter Leistungsproblemen. Wenn für Ihr Projekt mehrere Auslassungspunkte erforderlich sind, ziehen Sie eine andere Option in Betracht. Außerdem hier ein Zitat aus dem Repository: "Da die Leistung nicht verbessert werden kann, wird dieses Plugin nicht mehr aktiv gewartet."
Boyomarinov
1
Außerdem würde es nicht funktionieren, wenn sich der Text nach dem Laden dynamisch ändert :(
Dejell
34

Ich fand, dass Skeeps Antwort nicht genug war und auch einen overflowStil brauchte :

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
Simon H.
quelle
18

Wenn jemand SASS / SCSS verwendet und auf diese Frage stößt, könnte dieses Mixin hilfreich sein:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

Dadurch werden nur die Auslassungspunkte in Webkit-Browsern hinzugefügt. Ruhe schneidet es einfach ab.

pkyeck
quelle
1
Mit weniger musste ich ändern /* autoprefixer: off */zu /*! autoprefixer: off */sonst -webkit-box-orient: vertical;nach der Kompilierung entfernt zu werden, was bedeutet , die Auslassungs nie gezeigt
Nathan
18

Verwenden Sie einfach Line-Clamp für die Browser, die dies unterstützen (die meisten modernen Browser), und greifen Sie bei älteren auf 1 Zeile zurück.

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


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
Nikolaus
quelle
1
Leerraum: initial; rettete mich
James
10

Was für eine Schande, dass Sie es nicht über zwei Zeilen zum Laufen bringen können! Wäre fantastisch, wenn das Element ein Anzeigeblock wäre und eine Höhe von 2em oder so hätte, und wenn der Text überläuft, würde es eine Ellipse zeigen!

Für einen einzelnen Liner können Sie verwenden:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Für mehrere Zeilen können Sie möglicherweise eine Polyfüllung wie jQuery autoellipsis verwenden, die sich auf github http://pvdspek.github.com/jquery.autoellipsis/ befindet.

superlogisch
quelle
Dieses Plugin ist viel zu schwer für das, was es tut. Es ist 5 Jahre alt. Verwenden Sie lieber dotdotdotin einem anderen Beitrag erwähnt.
adi518
10

Ich bin kein JS-Profi, aber ich habe ein paar Möglichkeiten herausgefunden, wie Sie dies tun können.

Der HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

Dann schneiden Sie es mit jQuery auf eine bestimmte Anzahl von Zeichen ab, lassen aber das letzte Wort wie folgt:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

Das Ergebnis sieht folgendermaßen aus:

Lorem ipsum dolor sitzen amet, consectetur adipiscing elit. Morbi
elementum konsequenter Folter et…

Oder Sie können es einfach auf eine bestimmte Anzahl von Zeichen wie folgt kürzen:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

Das Ergebnis sieht folgendermaßen aus:

Lorem ipsum dolor sitzen amet, consectetur adipiscing elit. Morbi
elementum konsequent tortor et euismod…

Hoffe das hilft ein bisschen.

Hier ist die jsFiddle .

Ross Howard-Jones
quelle
7

Hier ist ein gutes Beispiel in reinem CSS.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}
<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Mirodil
quelle
Ziemlich gute Lösung, nur werden Texte abgeschnitten, auch wenn die zweite Zeile zu kurz ist, um abgeschnitten zu werden, aber dennoch Daumen hoch
Amin
4

Es handelt sich um ein nicht standardmäßiges CSS, das in der aktuellen Version von CSS nicht behandelt wird (Firefox unterstützt es nicht). Versuchen Sie stattdessen JavaScript zu verwenden.

Raubvogel
quelle
4

Reine CSS-Methode zum Trimmen von mehrzeiligem Text mit Auslassungspunkten

Passen Sie die Höhe des Textcontainers und die Steuerlinie an, um sie durch -webkit-line-clamp zu unterbrechen: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
Anil
quelle
3

Ich habe dieses Problem schon einmal kennengelernt und es gibt keine reine CSS-Lösung

Deshalb habe ich (unter anderem) eine kleine Bibliothek entwickelt, um dieses Problem zu lösen. Die Bibliothek bietet Objekte zum Modellieren und Durchführen von Textwiedergabe auf Buchstabenebene. Sie können beispielsweise einen Textüberlauf emulieren: Auslassungspunkte mit einer beliebigen Grenze (nicht erforderlich, eine Zeile)

Weitere Informationen finden Sie unter http://www.samuelrossille.com/home/jstext.html. Dort finden Sie einen Screenshot, ein Tutorial und einen Download-Link.

Samuel Rossille
quelle
3

Wenn jemand versucht, die Line-Clamp in der Flexbox zum Laufen zu bringen , ist dies etwas schwieriger - insbesondere, wenn Sie Foltertests mit wirklich langen Worten durchführen. Die einzigen wirklichen Unterschiede in diesem Code-Snippet bestehen min-width: 0;im Flex-Element, das abgeschnittenen Text enthält, und word-wrap: break-word;. Ein Tipp an https://css-tricks.com/flexbox-truncated-text/ für den Einblick. Haftungsausschluss: Dies ist immer noch Webkit nur soweit ich weiß.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}
<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (Codepen-Version)

AlexMA
quelle
1

Alle Antworten hier sind falsch, es fehlt ihnen ein wichtiges Stück, die Höhe

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>
wütende Kiwi
quelle
0

Eine reine CSS-Methode, die auf -webkit-line-clamp basiert und mit Webkit funktioniert:

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

Defims
quelle
-1

Kein wirklich einfacher Weg, dies zu tun. Verwenden Sie die Bibliothek Clamp.js .

$clamp(myHeader, {clamp: 3});
S. Galarneau
quelle
-6

Ich habe eine Lösung gefunden, aber Sie müssen eine grobe Zeichenlänge kennen, die in Ihren Textbereich passt, und dann ein ... mit dem vorhergehenden Leerzeichen verbinden.

Ich habe das so gemacht:

  1. Nehmen Sie eine grobe Zeichenlänge an (in diesem Fall 200) und übergeben Sie sie zusammen mit Ihrem Text an eine Funktion
  2. Teilen Sie die Leerzeichen so, dass Sie eine lange Zeichenfolge haben
  3. Verwenden Sie jQuery, um das erste "" Leerzeichen nach Ihrer Zeichenlänge zu schneiden
  4. mach mit bei den restlichen ...

Code:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

Hier ist eine Geige - http://jsfiddle.net/GYsW6/1/

Paul
quelle