Wie können wir Ellipsen (...) anhängen, um das Abschneiden eines mehrzeiligen „Elements' mit fester Breite und Höhe anzuzeigen?-js-Tutorial-php.cn

Wie können wir Ellipsen (...) anhängen, um das Abschneiden eines mehrzeiligen „Elements' mit fester Breite und Höhe anzuzeigen?

DDD

Freigeben： 2024-10-27 08:23:30

Original

551 Leute haben es durchsucht

How can we append ellipses (...) to indicate truncation on a multi-line `` element with a fixed width and height?

Ellipsenbehandlung für mehrzeiligen Textüberlauf mit fester Breite

Im Bereich der Webentwicklung besteht die Notwendigkeit, Textüberläufe innerhalb eines Containers mit spezifizierten Elementen elegant zu handhaben Breite und Höhe. Wie können wir Ellipsen (...) anhängen, um das Abschneiden in einem mehrzeiligen

anzuzeigen? Element?

Mögliche Lösung:

jQuery bietet eine Lösung mit folgendem Markup und CSS:

<code class="html"><div id="fos">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div></code>

Nach dem Login kopieren

<code class="css">#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}
#fos p {
  padding: 10px;
  margin: 0;
}</code>

Nach dem Login kopieren

Der jQuery-Code wiederholt schneidet das letzte Wort des Textes, bis die gewünschte Höhe erreicht ist:

<code class="javascript">var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
  $p.text(function (index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}</code>

Nach dem Login kopieren

Überlegungen:

Diese Technik sorgt für ein optisch korrektes Ergebnis, auch bei JavaScript deaktiviert.
Serverseitige Kürzung kann die Leistung verbessern.
Dies ist eine unvollständige Lösung und erfordert weitere Verfeinerung für eine praktische Implementierung.

Demonstration :

Eine Live-Demonstration ist auf jsFiddle verfügbar: https://jsfiddle.net/5638d9y0/

Zusätzliche Ressourcen:

[CSS Flexible Box Tutorial](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
[Einführung in Flexbox](https://developer.mozilla .org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
[Eine vollständige Anleitung zu Flexbox](https://www.w3schools.com/css/css3_flexbox.asp)

Das obige ist der detaillierte Inhalt vonWie können wir Ellipsen (...) anhängen, um das Abschneiden eines mehrzeiligen „Elements' mit fester Breite und Höhe anzuzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!