wie Text in Bezug auf div Höhe abgeschnitten werden?

Question

Ich habe ein div mit einer Höhe von 192px. Ich möchte Text innerhalb div abschneiden und am Ende ... zeigen wollen. Jetzt, aufgrund des großen Textes, wird die Schaltfläche abgeschnitten, wie im Schnappschuss gezeigt. Dies passiert, wenn ich HTML-Tags darin hinzufügen.

Kann jemand helfen?

Answer 1

Versuchen Sie, die folgenden CSS:

text-overflow: ellipsis; 
overflow: hidden; 
whitespace: no-wrap; 

Dies funktioniert nur für einzelne Linien. Für mehrere Zeilen benötigen Sie JavaScript.

Answer 2

Verwenden Sie overflow: hidden ... Ich kann genauer werden, wenn Sie mehr Code buchen. - j-man86 jetzt nur

bearbeiten

Answer 3

den Text zu verbergen, gibt es einfache Lösung, fügen Sie overflow: hidden CSS-Eigenschaft in div wie

folgen

<div style="overflow:hidden">your code</div> 

jedoch ... am Ende zu zeigen, was Sie brauchen um den Inhalt von div in Javascript zu erhalten und dort die Funktion substr zu verwenden. Dies wird eine Trial-and-Error-Lösung sein, um herauszufinden, wie viele Zeichen im Div angezeigt werden können.

Answer 4

Wie bereits erwähnt, wäre der einfachste Weg, um das Problem zu lösen, overflow:hidden zu Ihrem div's CSS-Stil hinzuzufügen.

Dies wird Ihnen jedoch nicht helfen, die Ellipse (Punkte) am Ende des Umbruchs hinzuzufügen, und es gibt keine Möglichkeit, dass ich mehrzeilige Textumschläge machen kann (endend mit den 3 Punkten am Ende). Verwenden Sie ausschließlich CSS.

Der einfachere Weg wäre, jQuery (oder ähnliche JavaScript Libraries) zu verwenden, um den Text zu umbrechen und die 3 Punkte am Ende hinzuzufügen. Beispiel:

Reference to another StackOverflow post about wrapping content using CSS and jQuery for single line and multi line text.

Es wird auch empfohlen, manchmal die Content-Server-Seite zu verarbeiten und dann auf der Seite verarbeitet angezeigt werden, aber es ist manchmal bequemer (oder schneller/einfacher) nur mit JavaScript.

Hier ist eine jQuery-Plugin, das den Trick tun wird: jQuery DotDotDot

Answer 5

Diese Frage mit Javascript markiert ist, so ist hier die fehlende Antwort.

Sie können über jedes Zeichen oder Wort (wie in diesem Beispiel) iterieren, während Sie überprüfen, dass die Höhe niedriger als Ihre gewünschte Höhe ist. Bei jedem truthigen Schritt könnten Sie den Inhalt des Elements mit seinem Text überschreiben, jedoch ohne das letzte Wort/Zeichen.

In diesem Fall konvertierte ich die Zeichenfolge in einem Array und pop es bei jeder Iteration. Dadurch wird den letzten Teil unseres Textes, und stellt sicher, dass die Schleife nicht infiniteeeee ...

/** 
 
* Truncates the text of an element depending its height. 
 
* 
 
* @param {Element} element 
 
* @param {Number} height 
 
*/ 
 
function truncateByHeight(element, height) { 
 
    var textContent = typeof element.textContent === 'undefined' ? 'innerText' : 'textContent'; 
 
    var parts = element[textContent].split(' '); 
 

 
    while (parts.pop() && element.clientHeight > height) { 
 
    element[textContent] = parts.join(' '); 
 
    } 
 
} 
 

 

 
var element = document.querySelector('.box'); 
 

 
truncateByHeight(element, 120);

<div class="box">Cornua naturae fulgura uno coegit quisquis ad margine? Pluvialibus umentia vultus nulli nunc pendebat speciem emicuit! Margine tonitrua caecoque iapeto. Origine levius nam. Silvas valles temperiemque forma? Ignotas tegit. Hunc ligavit: summaque freta illas invasit deerat proximus. Caelo calidis securae mentes pronaque traxit. 
 

 
Caligine omnia gentes. Posset aere certis eurus titan verba unus homini ora. Sed volucres. Campos effervescere flamina illi pondus umor. Cinxit obstabatque secrevit. Ligavit: natus aberant. Indigestaque regio rapidisque carmen coegit erat discordia liquidas. Ripis nix horrifer terrae dei tepescunt ad vos regio. 
 

 
Nabataeaque fronde pluviaque vos terra tellure flexi. Neu habendum poena locoque ne. Dedit locoque nunc nebulas. Mentisque liquidum summaque porrexerat cepit. Litem mare. Surgere adhuc ipsa. Orbem hanc volucres iapeto habentem. Dissociata otia inminet nubibus passim erant iners. Semina praecipites reparabat spectent fuerat.</div>