it-swarm.com.de

Begrenzen Sie die Textlänge mit CSS auf n Zeilen

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

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

434
Peter

Es gibt einen Weg, aber es ist nur ein Webkit. Wenn Sie dies jedoch mit line-height: X; und max-height: X*N; kombinieren, funktioniert dies auch in anderen Browsern, nur ohne Ellipsen.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: Ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Demo: http://jsfiddle.net/csYjC/1131/

507
Evgeny

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

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

89
Erik Aigner

Browserübergreifende Lösung

Dieses Problem plagt uns alle seit Jahren ...

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

Hier ist eine Nur-CSS-Lösung , die ich mir ausgedacht habe und die unter allen Umständen funktioniert, mit ein paar kleinen Einschränkungen.

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

Dann gibt es eine Pseudoklasse nach dem enthaltenden Div, die die Ellipse schön platziert.

Vorsichtsmaßnahmen

Bei dieser Lösung wird die Ellipse immer platziert, unabhängig davon, ob sie benötigt wird.

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

Sie müssen mit der richtigen Textausrichtung 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 prüft die jQuery alle .text-Elemente, und wenn mehr Zeichen als die voreingestellte max var vorhanden sind, schneidet sie den Rest ab und fügt eine Ellipse hinzu.

Bei diesem Ansatz gibt es keine Einschränkungen. Dieses Codebeispiel soll jedoch nur die Grundidee veranschaulichen. Ich würde dies in der Produktion nicht verwenden, ohne es aus zwei Gründen zu verbessern:

1) Es wird das innere HTML von .text-Elementen umgeschrieben. ob gebraucht 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 also sehr darauf, dass der Autor den .text korrekt verwendet.

Bearbeitet

Danke für den Fang @markzzz

Code & Snippet

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 -->
31
asimovwasright

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

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

30
Pekka 웃

Die Lösung von diesem Thread ist die Verwendung des jquery-Plugins dotdotdot . Keine CSS-Lösung, bietet aber viele Optionen für Links zum Lesen, dynamische Größenänderung usw.

15

die folgende CSS-Klasse hat mir geholfen, eine zweizeilige Ellipse 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;
    }
9
Mohammad Salman

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

5
dreamer_

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 und dass es für Container mit variabler Breite einschließlich Tabellenzellen funktioniert und browserübergreifend ist. 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%);
}

blogpost: http://salzerdesign.com/blog/?p=45

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

3
Miriam Salzer

Ich mag Line-Clamp wirklich, aber noch keine Unterstützung für Firefox. Also gehe ich mit einem mathematischen Kalkulator 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*/
}

nehmen wir an, 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 px 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, sodass ein zusätzliches Pixel dies behebt und keine zusätzlichen Probleme verursacht

ich werde ein Kaffeeskript einfügen, um dies nur ein Beispiel zu sein. Ich verwende ein paar Links, die standardmäßig ausgeblendet sind. Mit den Klassen read-more und read-less werden diejenigen entfernt, die der Überlauf nicht benötigt, und der Körper wird 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()
0
Alexis

Wenn Sie sich auf jedes letter konzentrieren möchten, das Sie so tun können, verweise ich auf this question

function truncate(source, size) {
  return source.length > size ? source.slice(0, size - 1) + "…" : source;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

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

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        title.split(' ').reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.Push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join(' ') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

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

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        Array.prototype.slice.call(title).reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.Push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join('') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);
0
Nisharg Shah

Grundlegender Beispielcode, das Erlernen des Codes ist einfach. Check 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>
0
KingRider