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

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>

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

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>

Ü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!

JavaScript jquery css for append this overflow https word

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn