jQuery: Holen Sie sich nur Textzeichen nicht versteckt/versteckt

Question

Mit dem folgenden CSS-Code kann ich sicherstellen, dass nur 3 Zeilen Text angezeigt wird, egal wie viele Zeilen in der div sind. Ich benutze diese Methode als einen Weg, um einen Teil von ... dem Satz vorzustellen, ohne alles zu zeigen.

.vslide_text{ 
    line-height:1.2em; 
    height:3.6em; 
    overflow:hidden; 
} 

Allerdings muß ich in der Lage sein, nur das nicht-verborgener Teil dieses Elements zu extrahieren, so dass ich es abspalten kann und lege drei Punkte ... danach.

Ich kann nicht finden, wie man nur jene sichtbaren Zeichen vorwählt.

Ist das möglich? Ich bin an einer Wand.

Was die sayeth Gruppe

Jay CompuMatter

Answer 1

Ich denke this Thread sehr hilfreich für Sie sein wird.

Answer 2

Der Trick, um drei Punkte (der Name für die drei Punkte) ist white-space: nowrap, overflow: hidden und text-overflow: ellipsis.

Dies sind die einzigen drei CSS-Eigenschaften, die Sie für eine einzelne Zeile von Ellipsen benötigen:

.ellipsis { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="ellipsis"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ligula lectus, quis rhoncus arcu ornare quis. Ut in aliquam massa. Mauris vel ipsum congue, rhoncus enim at, imperdiet odio. Nullam eget ipsum nec tortor venenatis suscipit. Aenean dui ipsum, volutpat eu felis nec, porttitor porttitor leo. Sed leo mauris, lobortis vel auctor at, scelerisque at augue. Suspendisse volutpat velit metus, non elementum quam ultricies in. Ut scelerisque consequat est, ac dictum neque varius ac. In hac habitasse platea dictumst. Donec gravida ante quis velit malesuada congue. Suspendisse potenti. Vestibulum massa lacus, efficitur ac mi iaculis, commodo interdum odio. Suspendisse euismod sodales lorem vel faucibus. Quisque pulvinar ultrices ligula, vitae dictum lacus fringilla eget. Quisque velit diam, laoreet quis bibendum ac, pellentesque nec metus. Vivamus ullamcorper vel augue ut ultricies.</div>

Für mehrere Linien, die Dinge ein wenig komplizierter. Sie möchten zuerst mit overflow: hidden und text-overflow: ellipsis wie zuvor beginnen. Sie möchten dann die display auf -webkit-box und die -webkit-box-orient auf vertical setzen. Sie können dann angeben, wie viele Zeilen mit -webkit-line-clamp angezeigt werden sollen.

Das folgende Beispiel zeigt den gleichen Text über drei Linien auf Webkit-Browser (Chrome und Safari die beiden wichtigsten zu sein):

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

<div class="ellipsis"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ligula lectus, quis rhoncus arcu ornare quis. Ut in aliquam massa. Mauris vel ipsum congue, rhoncus enim at, imperdiet odio. Nullam eget ipsum nec tortor venenatis suscipit. Aenean dui ipsum, volutpat eu felis nec, porttitor porttitor leo. Sed leo mauris, lobortis vel auctor at, scelerisque at augue. Suspendisse volutpat velit metus, non elementum quam ultricies in. Ut scelerisque consequat est, ac dictum neque varius ac. In hac habitasse platea dictumst. Donec gravida ante quis velit malesuada congue. Suspendisse potenti. Vestibulum massa lacus, efficitur ac mi iaculis, commodo interdum odio. Suspendisse euismod sodales lorem vel faucibus. Quisque pulvinar ultrices ligula, vitae dictum lacus fringilla eget. Quisque velit diam, laoreet quis bibendum ac, pellentesque nec metus. Vivamus ullamcorper vel augue ut ultricies.</div>

Beachten Sie, dass die oben wird nur Arbeit für Webkit-Browser. Für Nicht-Webkit-Browser (wie Firefox und Internet Explorer) gibt es eigentlich keine einfache Lösung.

.ellipsis { 
 
    /* The ellipsis falls outside the bounds */ 
 
    max-width: 96%; 
 
    
 
    /* Hide the overflow */ 
 
    overflow: hidden; 
 
    
 
    /* Required for the absolutely-positioned `:after` */ 
 
    position: relative; 
 
    
 
    /* Required for truncation */ 
 
    line-height: 1.2em; 
 
    max-height: 3.6em; 
 
    
 
    /* The last word would overflow on the right without this */ 
 
    text-align: justify; 
 
    margin-right: -1em; 
 
    padding-right: 1em; 
 
} 
 

 
/* The actual ellipsis */ 
 
.ellipsis:after { 
 
    content: '...'; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div class="ellipsis"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ligula lectus, quis rhoncus arcu ornare quis. Ut in aliquam massa. Mauris vel ipsum congue, rhoncus enim at, imperdiet odio nullam eget ipsum nec tortor venenatis suscipit. Aenean dui ipsum, volutpat eu felis nec, porttitor porttitor leo. Sed leo mauris, lobortis vel auctor at, scelerisque at augue. Suspendisse volutpat velit metus, non elementum quam ultricies in. Ut scelerisque consequat est, ac dictum neque varius ac. In hac habitasse platea dictumst. Donec gravida ante quis velit malesuada congue. Suspendisse potenti. Vestibulum massa lacus, efficitur ac mi iaculis, commodo interdum odio. Suspendisse euismod sodales lorem vel faucibus. Quisque pulvinar ultrices ligula, vitae dictum lacus fringilla eget. Quisque velit diam, laoreet quis bibendum ac, pellentesque nec metus. Vivamus ullamcorper vel augue ut ultricies.</div>

hoffe, das hilft: Bei diesen Browsern müssen wir durch die Nutzung der ::afterpseudo-element erhalten sogar mehr kompliziert! :)

Answer 3

Ich fand eine Lösung auf einem anderen Forum.

Das Ergebnis Geige Ende ist hier: https://jsfiddle.net/vaojjr7p/

Es Cross-Browser getestet wurde.

Danke an alle für einen Blick.

JS:

$('#output').wrapInner('<div/>'); 
var originaltext = $('#output div').text(); 

var t = originaltext; 

while (true) { 
    if ($('#output div').height() <= $('#output').height()) { 
    break; 
    } 

    $('#output div').text(t.substring(0, t.lastIndexOf(" "))+"..."); 
    t = $('#output div').text(); 
} 

//$('#output div').text(originaltext); 

alert('Visible text : "' + originaltext.substring(0, t.length) + '"'); 
alert('Hidden text : "' + originaltext.substring(t.length) + '"');