wake-up-neo.com

Bei CSS verwenden Sie "..." für überlaufende Mehrzeilenblöcke

mit

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

"..." wird am Ende der Zeile angezeigt, wenn es überläuft . Dies wird jedoch nur in einer Zeile angezeigt . Ich möchte, dass es in mehreren Zeilen angezeigt wird.

Es kann so aussehen:

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

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

Dort auch einige Leistungstests .

84
Jim Thomas

Ich habe herumgehackt, bis ich etwas in der Nähe erreicht habe. Es gibt einige Vorbehalte:

  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. Das bedeutet, dass, wenn Ihr Text nicht rechtsbündig oder nicht richtig ausgerichtet ist, zwischen dem letzten sichtbaren Wort und der Ellipse eine deutliche Lücke besteht (abhängig von der Länge des ersten verborgenen Wortes).
  3. Der Platz für die Ellipsis ist immer reserviert. Das bedeutet, wenn der Text fast genau in das Feld passt, wird er möglicherweise unnötig abgeschnitten (das letzte Wort wird ausgeblendet, obwohl dies technisch nicht erforderlich wäre).
  4. Ihr Text muss eine feste Hintergrundfarbe haben, da wir Ellipsen mit farbigen Rechtecken ausblenden, wenn dies nicht erforderlich ist.

Ich sollte auch beachten, dass der Text an einer Wortgrenze und nicht an einer Zeichengrenze gebrochen wird. Dies war absichtlich (da ich das für längere Texte besser halte), aber da es sich von text-overflow: Ellipsis unterscheidet, 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 einer 150 Pixel breiten Box mit drei Textzeilen auf weißem Hintergrund. Es wird davon ausgegangen, dass Sie über ein CSS-Reset oder ein ähnliches Element verfügen, das die Ränder und Auffüllungen bei Bedarf auf Null setzt.

/* 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 so aus:

image of the rendered result with different text lengths

Um zu verdeutlichen, wie es funktioniert, ist hier das gleiche Bild, außer dass .hidedots1 rot hervorgehoben ist und .hidedots2 in Cyan. Dies sind die Rechtecke, die die Ellipse verbergen, wenn kein unsichtbarer Text vorliegt:

the same image as above, except that the helper elements are highlighted in color

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

58
balpha

Hier ist ein aktueller css-tricks article , der das bespricht.

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

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

Beide Methoden setzen 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

ZEILENKLAMMER 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

Nehmen wir an, Sie setzen die Zeilenhöhe auf 1,2em. Wenn wir .__ ausstellen wollen. drei Zeilen Text können wir nur die Höhe des Containers bestimmen 3,6 em (1,2 em × 3). Der ausgeblendete Überlauf verdeckt 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 das Webkit-Line-Clamp auf Webkit-Browser anzuwenden und das Ausblenden in anderen Browsern anzuwenden.

@ UNTERST&UUML;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;
    }
}
41
Danield

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

Browserunterstützung - wie im Artikel angegeben:

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

Ältere Browser funktionieren immer noch recht gut, da das Fleisch das Layout befindet sich in normalen Positionierungs-, Rand- und Polsterungseigenschaften. wenn dein Plattform ist älter (z. B. Firefox 3.6, IE 8), Sie können die Methode aber .__ verwenden. Wiederholen Sie den Verlauf als eigenständiges PNG-Bild oder DirectX-Filter.

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

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

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

die Geige

(Browserfenster zum Testen vergrößern)

33
Kevin

Nachdem ich die W3-Spezifikation für Textüberlauf durchgesehen habe, glaube ich nicht, dass dies nur mit CSS möglich ist. Ellipsis ist eine neue ish-Eigenschaft, daher hat sie wahrscheinlich noch nicht viel Verwendung oder Feedback erhalten.

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

Wenn Javascript keine Option ist, denke ich, dass Sie kein Glück haben ...

21
Jeff

Ich möchte nur der Vollständigkeit halber diese Frage hinzufügen. 

  • Opera hat eine nicht standardmäßige Unterstützung für diese Funktion - o-Ellipsis-lastline .
  • dotdotdot ist ein tolles jQuery-Plugin, das ich empfehlen kann.
10
Matt

Großartige Frage ... Ich wünschte, es gäbe eine Antwort, aber dies ist die engste, die Sie heutzutage mit CSS bekommen können. Keine Ellipsis, aber immer noch ziemlich brauchbar.

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

In Ihrem Fall muss das Folgende effizient und ausreichend sein.

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: Ellipsis;
6
pxthxk

Hier ist die engste Lösung, die ich nur 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;
}

Arbeiten mit Fiddle (Verkleinern des Fensters zur Überprüfung von)

Link zu meinem Blog zur Erklärung

Aktualisiert Fiddle

Ich hoffe jetzt, dass ein Css-Experte eine Ahnung hatte, wie er perfekt wird. :)

6
Mr_Green

Ich habe diese css (scss) -Lösung gefunden, die ziemlich gut funktioniert. In Webkit-Browsern wird die Ellipse angezeigt und in anderen Browsern wird der Text einfach abgeschnitten. Welches ist gut für meinen beabsichtigten Gebrauch.

$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

6
Nikola Lajic

Etwas spät zu dieser Party, aber ich habe mir gedacht, dass dies eine einzigartige Lösung ist. Anstatt zu versuchen, Ihre eigene Ellipsis durch Css-Trickery oder Js einzufügen, dachte ich, ich würde versuchen, mit der Einschränkung der einzelnen Zeile zu rollen. Deshalb dupliziere ich den Text für jede "Zeile" und verwende einfach einen negativen Texteinzug, um sicherzustellen, dass eine Zeile dort beginnt, wo die letzte stoppt. 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 Browser-Reflow, für den ich eine JS-Neuzeichnung verwende. Sie sollten es also überprüfen, aber dies ist das Grundkonzept. Alle Gedanken/Vorschläge werden sehr geschätzt.

4
lupos

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

bei dieser Methode sind keine js erforderlich.

sie können background-image und keinen Farbverlauf zum Ausblenden von Punkten verwenden.

die innerHTML von .Ellipsis-placeholder ist nicht notwendig, ich verwende .Ellipsis-placeholder, um die gleiche Breite und Höhe mit .Ellipsis-more..__ beizubehalten. Sie können stattdessen display: inline-block 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

3
Defims

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

  • Nur CSS
  • Zukunftssicher (wird mit der Zeit besser kompatibel)
  • Wörter nicht auseinander brechen (nur Leerzeichen)

Der Nachteil ist, dass es keine Ellipsis für Browser bereitstellt, die die -webkit-line-clamp-Regel nicht unterstützen (derzeit IE, Edge, Firefox), aber es verwendet einen Verlauf, 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 Aktion in this CodePen sehen, und Sie können auch eine Javascript-Version hier (kein jQuery) sehen.

3
NilsyNils

javascript-Lösung wird besser sein

  • holen Sie sich die Zeilennummer des Textes
  • is-Ellipsis class umschalten, wenn sich die Fenstergröße oder das Element ändert

getRowRects

Element.getClientRects() funktioniert wie this

enter image description here

jedes Rect in derselben Zeile hat den gleichen top-Wert. Ermitteln Sie also die Rects mit einem anderen top-Wert, z. B. this .

enter image description here 

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

float ...more

wie this

enter image description here

ermitteln Sie die Fenstergröße oder das Element, das geändert wurde

wie this

enter image description here

enter image description here

enter image description here

2
Defims

eine reine css-method-basis auf -webkit-line-clamp:

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

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

mehr sehen hier klicken

0
elrrrrrrr