CSS-Auslassungspunkte in der zweiten Zeile

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

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.

Dies sollte in Webkit-Browsern funktionieren :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

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 .

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;

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.

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

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.

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 .

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>

Ich habe bereits das jQuery-Condense-Plugin verwendet , das anscheinend das tun kann, was Sie wollen. Wenn nicht, gibt es verschiedene Plugins , die Ihren Anforderungen entsprechen könnten.

Bearbeiten: Haben Sie eine Demo gemacht - beachten Sie, dass ich die jquery.condense.js auf der Demo verlinkt habe, die die Magie macht, also volle Anerkennung an den Autor dieses Plugins :)

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.

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

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.

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)

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>

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>

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

$clamp(myHeader, {clamp: 3});

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/