Begrenzen Sie die Textlänge mit CSS auf n Zeilen

515

Ist es möglich, eine Textlänge mit CSS auf "n" Zeilen zu beschränken (oder sie zu schneiden, wenn sie vertikal überläuft)?

text-overflow: ellipsis; funktioniert nur für 1 Zeilentext.

Original Text:

Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Setz dich est sed! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, Magna Sagittis, Lorem Velit

gewünschte Ausgabe (2 Zeilen):

Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum ...

Peter
quelle
1
Nur eine Anmerkung: Textüberlauf- Auslassungspunkte werden
Joril
8
Es scheint, dass jemand davongekommen ist, indem er es mit css mobify.com/dev/multiline-ellipsis-in-pure-css
Gaurav Shah
funktioniert nicht auf IE10. Es funktioniert am 11.
user2060451
@ GauravShah Danke. Es funktioniert auch auf IE10. Die meisten Lösungen hier sind nicht browserübergreifend.
user2060451
Siehe auch
AlikElzin-kilaka

Antworten:

655

Es gibt eine Möglichkeit, dies mit der inoffiziellen Line-Clamp- Syntax zu tun. Ab Firefox 68 funktioniert dies in allen gängigen Browsern.

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

Wenn Sie sich nicht um IE-Benutzer kümmern, müssen Sie dies nicht tun line-height , und max-heightFallbacks.

Evgeny
quelle
3
Bei einer bestimmten Schriftgröße bis zur Zeilenhöhe können Sie beispielsweise einen Teil der nächsten Zeile auch mit Textausrichtung sehen: Ausrichten, die Auslassungspunkte befinden sich nicht am Ende der letzten Zeile, sondern überlappen den Text an der Position wäre, wenn der Text nach links ausgerichtet wäre
Matus
3
Hier ist die Geige: jsfiddle.net/csYjC/1122 Während ich sie vorbereitete, fand ich heraus, dass ein Teil der letzten Zeile nur sichtbar ist, wenn Polster vorhanden sind
Matus
Nun, niemand hat gesagt, dass diese nicht standardmäßige schwarze Magie, die nur aus Webkits besteht, die ganze Zeit perfekt funktionieren wird. Sie können die Auffüllung für einen anderen, möglicherweise übergeordneten Container verwenden. Das Schreiben von Text in das <p> -Tag ist absolut
Evgeny
2
Beachten Sie, dass ab diesem Kommentar -webkit-line-clamp die Sichtbarkeit nicht berücksichtigt: versteckt. Das hat mich ein paar Stunden beim Debuggen gekostet. Hier ist ein unterstützender Fehlerbericht: bugs.webkit.org/show_bug.cgi?id=45399 .
Kevin
3
Wenn Sie Probleme haben -webkit-box-orient: vertical;, beim Kompilieren von scss versteckt zu werden, versuchen Sie dies /* autoprefixer: ignore next */ -webkit-box-orient: vertical;
Salam
109

Was Sie tun können, ist Folgendes:

.max-lines {
  display: block;/* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}
<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>

wo max-height:= line-height:× <number-of-lines>in em.

Erik Aigner
quelle
13
Funktioniert wie ein Textüberlauf: Clip, da er nicht
angezeigt wird
Scheint auch für mich die bestmögliche Lösung zu sein, aber wie @rishiAgar feststellte, endet es nicht mit Auslassungspunkten. Funktioniert weiterhin wie ein Clip.
David Carrigan
Ich glaube, Sie müssen die Attribute hinzufügen display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;, damit die Auslassungspunkte angezeigt werden. Dies funktioniert jedoch nur in Chrome. Eine Lösung, die auch unter Firefox funktioniert, finden Sie hier: stackoverflow.com/a/20595073/1884158 Und hier ist ein hilfreiches Tutorial zu diesem Thema: css-tricks.com/line-clampin
modulitos
34

Browserübergreifende Lösung

Dieses Problem plagt uns alle seit Jahren.

Um in allen Fällen zu helfen, habe ich den CSS-only-Ansatz und einen jQuery-Ansatz für den Fall, dass die CSS-Vorbehalte ein Problem darstellen, festgelegt.

Hier ist nur ein CSS Lösung, die unter allen Umständen funktioniert, mit ein paar kleinen Einschränkungen.

Die Grundlagen sind einfach, sie verbergen den Überlauf der Spanne und legen die maximale Höhe basierend auf der von Eugene Xa vorgeschlagenen Linienhöhe fest.

Dann gibt es eine Pseudoklasse nach dem enthaltenen div, die die Auslassungspunkte schön platziert.

Vorsichtsmaßnahmen

Diese Lösung platziert immer die Auslassungspunkte, unabhängig davon, ob dies erforderlich ist.

Wenn die letzte Zeile mit einem Endsatz endet, erhalten Sie vier Punkte ....

Sie müssen mit der Ausrichtung des Textes zufrieden sein.

Die Auslassungspunkte befinden sich rechts neben dem Text, der schlampig aussehen kann.

Code + Snippet

jsfiddle

.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */
<div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

jQuery-Ansatz

Meiner Meinung nach ist dies die beste Lösung, aber nicht jeder kann JS verwenden. Grundsätzlich überprüft die jQuery jedes .text-Element. Wenn mehr Zeichen als die voreingestellte maximale Variable vorhanden sind, wird der Rest abgeschnitten und eine Ellipse hinzugefügt.

Es gibt keine Einschränkungen bei diesem Ansatz, aber dieses Codebeispiel soll nur die Grundidee demonstrieren - ich würde dies nicht in der Produktion verwenden, ohne es aus zwei Gründen zu verbessern:

1) Es wird das innere HTML von .text-Elementen neu schreiben. ob benötigt oder nicht. 2) Es wird kein Test durchgeführt, um zu überprüfen, ob das innere HTML keine verschachtelten Elemente enthält. Sie verlassen sich daher sehr darauf, dass der Autor den .text korrekt verwendet.

Bearbeitet

Danke für den Fang @markzzz

Code-Auszug

jsfiddle

setTimeout(function()
{
	var max = 200;
  var tot, str;
  $('.text').each(function() {
  	str = String($(this).html());
  	tot = str.length;
    str = (tot <= max)
    	? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.
.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->

asimovwasright
quelle
3
Ihre CSS-Lösung ist nicht so gut, denn was ist mit dem Fall, dass der Text nicht überläuft? es wird auch "..."
angezeigt
Aber auch die jQuery-Version fügt Punkte hinzu, wenn der Text kürzer ist: jsfiddle.net/o82opadm/35
markzzz
@markzzz - danke dafür, keine Ahnung, wie ich es verpasst habe :-) Ich habe es jetzt überarbeitet, aber es ist nichts, was ich ohne ein bisschen mehr Arbeit in der Produktion verwenden würde. Aber zumindest ist die Grundidee dargelegt.
Asimovwasright
1
Ich fand, dass die Nur-CSS-Lösung gut zu funktionieren scheint, aber nur, wenn Sie nur Pixelmessungen verwenden. EMs und Prozentsätze haben mich in Schwierigkeiten gebracht. Und ich habe die Auslassungspunkte als <a> -Stil zur Position hinzugefügt: absolut unten rechts für diejenigen, die auf den Link klicken und mehr lesen möchten. In meinem Fall wusste ich, dass der Text immer überlaufen würde, sodass jQuery nicht erforderlich war. Vielen Dank für die nützliche CSS-Lösung!
Mentalist
30

Soweit ich sehen kann, wäre dies nur mit möglich height: (some em value); overflow: hiddenund selbst dann hätte es ...am Ende keine Lust .

Wenn dies keine Option ist, ist es meiner Meinung nach ohne eine serverseitige Vorverarbeitung (schwierig, da der Textfluss nicht zuverlässig vorherzusagen ist) oder jQuery (möglich, aber wahrscheinlich kompliziert) unmöglich.

Pekka 웃
quelle
16
Dies scheint für jede Schriftgröße zu funktionieren .mytext {overflow: hidden; Zeilenhöhe: 1.2em; maximale Höhe: 2,4 em; }
Peter
1
@ Pedro ja. Möglicherweise können Sie jedes .mytextmit jQuery durchlaufen , herausfinden, ob es mehr Inhalt enthält als sichtbar ist, und einen ...manuell hinzufügen . Auf diese Weise sind Sie mit Clients ohne JS kompatibel, und Clients mit JS können die Dekoration erhalten. Vielleicht ist es eine separate Frage wert, die ein jQuery Guru beantworten muss. könnte relativ einfach möglich sein
Pekka
15

Die Lösung aus diesem Thread besteht darin, das jquery-Plugin dotdotdot zu verwenden . Keine CSS-Lösung, aber es gibt Ihnen viele Optionen für "Lesen Sie mehr" -Links, dynamische Größenänderung usw.

Martin Andersson
quelle
10

Der folgende CSS-Kurs half mir dabei, Auslassungspunkte mit zwei Zeilen zu erhalten.

  .two-line-ellipsis {
        padding-left:2vw;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }
Mohammad Salman
quelle
5

Derzeit können Sie nicht, aber in Zukunft können Sie verwenden text-overflow:ellipis-lastline. Derzeit ist es mit dem Herstellerpräfix in Opera 10.60+ verfügbar: Beispiel

Träumer_
quelle
5
Dies funktioniert nicht für mehrzeilige Zeichenfolgen, da auch White-Scace: Nowrap festgelegt werden muss. Siehe hier .
Sebastian Noack
4

Ich habe eine Lösung, die gut funktioniert, aber stattdessen verwendet eine Ellipse einen Farbverlauf. Es funktioniert, wenn Sie dynamischen Text haben, sodass Sie nicht wissen, ob er lang genug ist, um eine Ellipse zu benötigen. Die Vorteile sind, dass Sie keine JavaScript-Berechnungen durchführen müssen. Dies funktioniert für Container mit variabler Breite, einschließlich Tabellenzellen, und ist browserübergreifend. Es verwendet ein paar zusätzliche Divs, ist aber sehr einfach zu implementieren.

Markup:

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

Blogeintrag: http://salzerdesign.com/blog/?p=453

Beispielseite: http://salzerdesign.com/test/fade.html

Miriam Salzer
quelle
3
.class{
   word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px; /* fallback */
   max-height: 32px; /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}
Ali
quelle
0

Ich mag Line-Clamp wirklich, aber noch keine Unterstützung für Firefox. Also gehe ich mit einer mathematischen Berechnung und verstecke einfach den Überlauf

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

Angenommen, Sie möchten diese Klasse über jQuery mit einem Link entfernen und hinzufügen. Sie benötigen ein zusätzliches Pixel, sodass die maximale Höhe 63 Pixel beträgt. Dies liegt daran, dass Sie jedes Mal überprüfen müssen, ob die Höhe größer als ist 62px, aber im Fall von 4 Zeilen erhalten Sie ein falsches wahr, so dass ein zusätzliches Pixel dies behebt und keine zusätzlichen Probleme verursacht

Ich werde ein Coffeescript einfügen, um dies nur als Beispiel zu verwenden. Ich verwende ein paar Links, die standardmäßig ausgeblendet sind. Bei Klassen, die mehr lesen und weniger lesen, werden diejenigen entfernt, die der Überlauf nicht benötigt, und der Körper entfernt -Überlaufklassen

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()
Alexis
quelle
Übrigens, fügen Sie keine Line-Clamp hinzu, es wird die Höhe auf 62px (für diesen Fall) einstellen und Sie werden nicht die jquery-Komprimierung haben
Alexis
0

Wenn Sie sich auf jeden konzentrieren möchten, den letterSie so machen können, beziehe ich mich auf diese Frage

Wenn Sie sich auf jedes konzentrieren möchten, können wordSie dies tun + Leerzeichen

Wenn Sie sich auf jeden konzentrieren möchten, können wordSie dies + ohne Leerzeichen tun

Nisharg Shah
quelle
-1

Grundlegender Beispielcode: Das Erlernen des Codierens ist einfach. Überprüfen Sie die Style-CSS-Kommentare.

table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}
<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>

KingRider
quelle
4
Das OP sucht nach einer mehrzeiligen Lösung. Dies funktioniert nur in einzelnen Textzeilen.
Asimovwasright
-11

Ich habe mich danach umgesehen, aber dann wird mir klar, verdammt, meine Website verwendet PHP !!! Warum nicht die Trimmfunktion für die Texteingabe verwenden und mit der maximalen Länge spielen?

Hier ist auch eine mögliche Lösung für diejenigen, die PHP verwenden: http://ideone.com/PsTaI

<?php
$s = "In the beginning there was a tree.";
$max_length = 10;

if (strlen($s) > $max_length)
{
   $offset = ($max_length - 3) - strlen($s);
   $s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}

echo $s;
?>
Maxime
quelle
18
Sie können die serverseitige Verarbeitung nicht sicher verwenden, da Sie nicht im Voraus wissen können, wie viel Platz der Text auf der Seite einnimmt. Es hängt von der Schriftgröße, den Einstellungen der Browsertextgröße, der
Zoomstufe des