web-dev-qa-db-ger.com

Ellipsis auf mehrzeiligen Text anwenden

Gibt es eine Lösung, um Ellipsis in der letzten Zeile in einem Div mit einer Flüssigkeitshöhe (20%) hinzuzufügen?

Ich habe die -webkit-line-clamp-Funktion in CSS gefunden, aber in meinem Fall hängt die Zeilennummer von der Fenstergröße ab.

p {
    width:100%;
    height:20%;
    background:red;
    position:absolute;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>

Ich habe dieses JSFiddle, um das Problem zu veranschaulichen. https://jsfiddle.net/96knodm6/

86
Bruno Landowski

Ich habe endlich eine Lösung gefunden, um das zu tun, was ich will. Als p ein Paragraphe und article der Wrapper. Wenn Sie Ellipsis auf p anwenden möchten, abhängig von article height (was auch von der Fensterhöhe abhängt), müssen Sie die height der article, den line-height der p und dann articleHeight/lineHeight ermitteln, um die Anzahl der line-clamp zu ermitteln dann dynamisch hinzugefügt werden. 

Das einzige, was ist, line-height sollte in der CSS-Datei deklariert werden.

Überprüfen Sie den folgenden Code. Wenn Sie die Höhe des Fensters ändern, ändert sich der line-clamp. Kann großartig sein, um ein Plug-in zu erstellen, das das Ziel hat.

jsfiddle

function lineclamp() {
  var lineheight = parseFloat($('p').css('line-height'));
  var articleheight = $('article').height(); 
  var calc = parseInt(articleheight/lineheight);
  $("p").css({"-webkit-line-clamp": "" + calc + ""});
}


$(document).ready(function() {
    lineclamp();
});

$( window ).resize(function() {
 	lineclamp();
});
article {
  height:60%;
  background:red;
  position:absolute;
}

p {
  margin:0;
  line-height:120%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: Ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>

11
Bruno Landowski

Wenn Sie Ellipsis (...) auf eine einzelne Textzeile anwenden möchten, macht CSS dies mit der Eigenschaft text-overflow etwas einfacher. Es ist immer noch ein bisschen schwierig (aufgrund der Anforderungen - siehe unten), aber text-overflow macht es möglich und zuverlässig.

Wenn Sie jedoch Ellipsis für mehrzeiliger Text verwenden möchten - wie hier -, dann erwarten Sie keinen Spaß. CSS bietet hierfür keine Standardmethode, und die Problemumgehungen sind ein Treffer.

Ellipsis für einzeiligen Text

Mit text-overflow können Ellipsis auf eine einzelne Textzeile angewendet werden. Die folgenden CSS-Anforderungen müssen erfüllt sein:

  • muss eine width, max-width oder flex-basis haben
  • muss white-space: nowrap haben
  • muss overflow mit einem anderen Wert als visible haben
  • muss display: block oder inline-block sein (oder das funktionale Äquivalent, z. B. ein Flex-Artikel).

Das wird also funktionieren:

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: Ellipsis;
  border: 1px solid #ddd;
  margin: 0;
}
<p>
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
</p>

jsFiddle Version

Aber versuchen Sie, width zu entfernen, oder overflow standardmäßig auf visible zu setzen oder white-space: nowrap zu entfernen oder ein anderes Element als ein Blockcontainerelement zu verwenden. AND, Ellipsis schlägt fehl.

Eine große Sache hier: text-overflow: Ellipsis hat keine Auswirkung auf mehrzeiligen Text. (Die white-space: nowrap-Anforderung allein beseitigt diese Möglichkeit.)

p {
    width: 200px;
    /* white-space: nowrap; */
    height: 90px; /* new */
    overflow: hidden;
    display: inline-block;
    text-overflow: Ellipsis;
    border: 1px solid #ddd;
    margin: 0;
}
<p>
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>. 
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
  This is a test of CSS <i>text-overflow: Ellipsis</i>.
</p>

jsFiddle Version


Ellipsis für mehrzeiligen Text

Da CSS keine Eigenschaft für Ellipsis für mehrzeiligen Text hat, wurden verschiedene Problemumgehungen erstellt. Einige dieser Methoden finden Sie hier:

79
Michael_B

Bitte überprüfen Sie diese CSS für Auslassungspunkte für mehrzeiligen Text

body {
  margin: 0;
  padding: 50px;
}

/* mixin for multiline */
.block-with-text {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 6em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}
.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;
}
<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of  Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon;  use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>
30
Sawan mishra

Dieser Mann hat die beste Lösung. Nur css:

.multiline-Ellipsis {
    display: block;
    display: -webkit-box;
    max-width: 400px;
    height: 109.2px;
    margin: 0 auto;
    font-size: 26px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: Ellipsis;
}
7

Erhöhen Sie einfach die -webkit-line-clamp: 4;, um die Anzahl der Zeilen zu erhöhen

p {
    display: block;
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: Ellipsis;
}
<p>Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.</p>


Bearbeiten Sie 02/05/2018

Line Clamp ist ein proprietäres und undokumentiertes CSS (Webkit): https://caniuse.com/#feat=css-line-clamp , so dass es derzeit nur für wenige Browser funktioniert.

7
Jobincs

Ich habe gerade ein bisschen mit diesem Konzept herumgespielt. Wenn Sie in Ordnung sind, möglicherweise ein Pixel oder so von Ihrem letzten Zeichen abgeschnitten zu haben, ist hier eine reine CSS- und HTML-Lösung:

Das funktioniert so, dass ein div absolut unter dem sichtbaren Bereich eines Viewports positioniert wird. Wir möchten, dass sich das div in den sichtbaren Bereich versetzt, wenn unser Inhalt wächst. Wenn der Inhalt zu stark anwächst, wird unser Div zu hoch verschoben, so dass der Inhalt an der Obergrenze wachsen kann.

HTML:

<div class="text-container">
  <span class="text-content">
    PUT YOUR TEXT HERE
    <div class="Ellipsis">...</div> // You could even make this a pseudo-element
  </span>
</div>

CSS:

.text-container {
    position: relative;
    display: block;
    color: #838485;
    width: 24em;
    height: calc(2em + 5px); // This is the max height you want to show of the text. A little extra space is for characters that extend below the line like 'j'
    overflow: hidden;
    white-space: normal;
}

.text-content {
  Word-break: break-all;
  position: relative;
  display: block;
  max-height: 3em;       // This prevents the Ellipsis element from being offset too much. It should be 1 line height greater than the viewport 
}

.Ellipsis {
  position: absolute;
  right: 0;
  top: calc(4em + 2px - 100%); // Offset grows inversely with content height. Initially extends below the viewport, as content grows it offsets up, and reaches a maximum due to max-height of the content
  text-align: left;
  background: white;
}

Ich habe dies in Chrome, FF, Safari und IE 11 getestet. 

Sie können es hier ausprobieren: http://codepen.io/puopg/pen/vKWJwK

Sie können sogar die abrupte Abschneidung des Charakters mit CSS-Zauber abmildern. 

EDIT: Ich denke, eine Sache, die dies zwingt, ist Word-break: break-all, da der Inhalt sonst nicht bis zum Ende des Viewports reicht. :(

6
puopg

Leider nicht mit dem aktuellen Stand der Dinge in CSS. 

Ellipsis-Rendering hat die Voraussetzung white-space:nowrap, was effektiv bedeutet: Ellipsis werden nur in einzeiligen Textcontainern gezeichnet. 

6
c-smile
p {
    width:100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    background:#fff;
    position:absolute;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>
3
satish mallick

benutzer diese Formel:

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //put number of line here
3

Ich habe mir dafür eine eigene Lösung ausgedacht:

/*this JS code puts the Ellipsis (...) at the end of multiline Ellipsis elements
 *
 * to use the multiline Ellipsis on an element give it the following CSS properties
 * line-height:xxx
 * height:xxx (must line-height * number of wanted lines)
 * overflow:hidden
 *
 * and have the class js_Ellipsis
 * */

//do all Ellipsis when jQuery loads
jQuery(document).ready(function($) {put_ellipsisses();});

//redo Ellipsis when window resizes
var re_Ellipsis_timeout;
jQuery( window ).resize(function() {
    //timeout mechanism prevents from chain calling the function on resize
    clearTimeout(re_Ellipsis_timeout);
    re_Ellipsis_timeout = setTimeout(function(){ console.log("re_Ellipsis_timeout finishes"); put_ellipsisses(); }, 500);
});

//the main function
function put_ellipsisses(){
    jQuery(".js_Ellipsis").each(function(){

        //remember initial text to be able to regrow when space increases
        var object_data=jQuery(this).data();
        if(typeof object_data.oldtext != "undefined"){
            jQuery(this).text(object_data.oldtext);
        }else{
            object_data.oldtext = jQuery(this).text();
            jQuery(this).data(object_data);
        }

        //truncate and Ellipsis
        var clientHeight = this.clientHeight;
        var maxturns=100; var countturns=0;
        while (this.scrollHeight > clientHeight && countturns < maxturns) {
            countturns++;
            jQuery(this).text(function (index, text) {
                return text.replace(/\W*\s(\S)*$/, '...');
            });
        }
    });
}
You can achieve this by a few lines of CSS and JS.

CSS:

        div.clip-context {
          max-height: 95px;
          Word-break: break-all;
          white-space: normal;
          Word-wrap: break-Word; //Breaking unicode line for MS-Edge works with this property;
        }

JS:

        $(document).ready(function(){
             for(let c of $("div.clip-context")){
                    //If each of element content exceeds 95px its css height, extract some first 
                    //lines by specifying first length of its text content. 
                   if($(c).innerHeight() >= 95){
                        //Define text length for extracting, here 170.
                        $(c).text($(c).text().substr(0, 170)); 
                        $(c).append(" ...");
                   }
             }

        });

HTML:

        <div class="clip-context">
            (Here some text)
        </div>
1
MAK SOKMANH

Vielleicht kann dir das helfen. Mehrzeilige Ellipsen mit Tooltip-Schwebeflug . https://codepen.io/Anugraha123/pen/WOBdOb

<div>
     <p class="cards-values">Lorem ipsum dolor sit amet,   consectetur adipiscing elit. Nunc aliquet lorem commodo, semper mauris nec, suscipit nisi. Nullam laoreet massa sit amet leo malesuada imperdiet eu a augue. Sed ac diam quis ante congue volutpat non vitae sem. Vivamus a felis id dui aliquam tempus
      </p>
      <span class="tooltip"></span>
</div>
1
<!DOCTYPE html>
<html>
<head>
    <style>
        /* styles for '...' */
        .block-with-text {
            width: 50px;
            height: 50px;
            /* hide text if it more than N lines  */
            overflow: hidden;
            /* for set '...' in absolute position */
            position: relative;
            /* use this value to count block height */
            line-height: 1.2em;
            /* max-height = line-height (1.2) * lines max number (3) */
            max-height: 3.6em;
            /* fix problem when last visible Word doesn't adjoin right side  */
            text-align: justify;
            /* place for '...' */
            margin-right: -1em;
            padding-right: 1em;
        }
            /* create the ... */
            .block-with-text:before {
                /* points in the end */
                content: '...';
                /* absolute position */
                position: absolute;
                /* set position to right bottom corner of block */
                right: 0;
                bottom: 0;
            }
            /* hide ... if we have text, which is less than or equal to max lines */
            .block-with-text:after {
                /* points in the end */
                content: '';
                /* absolute position */
                position: absolute;
                /* set position to right bottom corner of text */
                right: 0;
                /* set width and height */
                width: 1em;
                height: 1em;
                margin-top: 0.2em;
                /* bg color = bg color under block */
                background: white;
            }
    </style>
</head>
<body>
    a
    <div class="block-with-text">g fdsfkjsndasdasd asd asd asdf asdf asdf asdfas dfa sdf asdflk jgnsdlfkgj nsldkfgjnsldkfjgn sldkfjgnls dkfjgns ldkfjgn sldkfjngl sdkfjngls dkfjnglsdfkjng lsdkfjgn sdfgsd</div>
    <p>This is a paragraph.</p>

</body>
</html>
1
Anup Nair

Ich habe mir angesehen, wie YouTube es auf ihrer Homepage löst und vereinfacht:

.multine-Ellipsis {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: Ellipsis;
  white-space: normal;
}

Dies erlaubt 2 Zeilen Code und hängt dann eine Ellipsis an.

Gist: https://Gist.github.com/eddybrando/386d3350c0b794ea87a2082bf4ab014b

1

Nach vielen Versuchen bekam ich schließlich ein gemischtes js/css, um Multilinien- und Single-Line-Überläufe zu bewältigen.

CSS3-Code:

.forcewrap { // single line Ellipsis
  -ms-text-overflow: Ellipsis;
  -o-text-overflow: Ellipsis;
  text-overflow: Ellipsis;
  overflow: hidden;
  -moz-binding: url( 'bindings.xml#Ellipsis' );
  white-space: nowrap;
  display: block;
  max-width: 95%; // spare space for Ellipsis
}

.forcewrap.multiline {
  line-height: 1.2em;  // my line spacing 
  max-height: 3.6em;   // 3 lines
  white-space: normal;
}

.manual-Ellipsis:after {
  content: "\02026";      // '...'
  position: absolute;     // parent container must be position: relative
  right: 10px;            // typical padding around my text
  bottom: 10px;           // same reason as above
  padding-left: 5px;      // spare some space before Ellipsis
  background-color: #fff; // hide text behind
}

und ich überprüfe einfach mit js-Code auf Überläufe bei divs wie folgt:

function handleMultilineOverflow(div) {
    // get actual element that is overflowing, an anchor 'a' in my case
    var element = $(div).find('a'); 
    // don't know why but must get scrollHeight by jquery for anchors
    if ($(element).innerHeight() < $(element).prop('scrollHeight')) {
        $(element).addClass('manual-Ellipsis');
    }
}

Verwendungsbeispiel in html:

<div class="towrap">
  <h4>
    <a class="forcewrap multiline" href="/some/ref">Very long text</a>
  </h4>
</div>
1
Fabian

Bitte überprüfen Sie den folgenden Code für einen reinen CSS-Trick mit korrekter Ausrichtung, der alle Browser unterstützt

 .block-with-text {
    overflow: hidden;
    position: relative;
    line-height: 1.2em;
    max-height: 103px;
    text-align: justify;
    padding: 15px;
}

.block-with-text:after {
    content: '...';
    position: absolute;
    right: 15px;
    bottom: -4px;
    background: linear-gradient(to right, #fffff2, #fff, #fff, #fff);
}

.

<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>
1

Leider unterstützt CSS kein Cross-Browser-Multiline-Clamping, es scheint nur Webkit zu sein. 

Sie könnten versuchen, eine einfache Javascript-Ellipsis-Bibliothek wie Ellipsity auf github zu verwenden. Der Quellcode ist sehr sauber und klein. Wenn Sie also zusätzliche Änderungen vornehmen müssen, sollte dies recht einfach sein. 

https://github.com/Xela101/Ellipsity

0
Xela

Meine Lösung, die für mich bei mehrzeiliger Ellipsis funktioniert:

.crd-para {
    color: $txt-clr-main;
    line-height: 2rem;
    font-weight: 600;
    margin-bottom: 1rem !important;
    overflow: hidden;

    span::after {
        content: "...";
        padding-left: 0.125rem;
    }
}
0
LoveAnimesh143

Wenn Sie Javascript verwenden, können Sie möglicherweise etwas wie das Folgende tun. Dies berücksichtigt jedoch nicht die Höhe des Containers ...

// whatever string
const myString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque sem ut consequat pulvinar. Curabitur vehicula quam sit amet risus aliquet, sed rhoncus tortor fermentum. Etiam ac fermentum nisi. Ut in lobortis eros. Etiam urna felis, interdum sit amet fringilla eu, bibendum et nunc.';

// you can set max string length
const maxStrLength = 100;
const truncatedString = myString.length > maxStrLength ? `${myString.substring(0, maxStrLength)}...` : myString;

console.log(truncatedString);
0
Noby Fujioka

Nachdem ich mich im Internet umgesehen hatte und viele dieser Optionen ausprobiert hatte, konnte ich nur sicherstellen, dass die Unterstützung korrekt ist, d. H. Durch Javascript. Ich habe eine Schleifenfunktion erstellt, um Postelemente zu durchlaufen, für die ein mehrzeiliges Abschneiden erforderlich ist. 

* note Ich habe Jquery verwendet und setzt voraus, dass Ihre Klasse post__items eine feste maximale Höhe hat. 

// loop over post items
$('.post__items').each(function(){
    var textArray = $(this).text().split(' ');
    while($(this).prop('scrollHeight') > $(this).prop('offsetHeight')) {
        textArray.pop();
        $(this).text(textArray.join(' ') + '...');
     }
});
0
Paddy
p{
line-height: 20px;
width: 157px;
white-space: nowrap; 
overflow: hidden;
text-overflow: Ellipsis;
}

oder wir können die Zeilen durch Verwendung von Höhe und Überlauf einschränken.

0
Nagendra Matala

Nun, Sie könnten die Line-Clamp-Funktion in CSS3 verwenden.

p {
    overflow: hidden;
    text-overflow: Ellipsis;
    display: -webkit-box;
    line-height: 25px;
    height: 52px;
    max-height: 52px;
    font-size: 22px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Stellen Sie sicher, dass Sie die Einstellungen wie Sie selbst ändern.

0
dutchsociety