Gibt es eine Möglichkeit, den abgeschnittenen CSS-Text über jQuery abzurufen?

Lesezeit: 3 Minuten

Benutzer-Avatar
Steve Cersosimo

Ich versuche, den HTML-Code von einem abgeschnittenen CSS-Element abzurufen, und kann es anscheinend nicht richtig hinbekommen.

Zum Beispiel:

<span id=mySpan style=white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50px>This is the contents of the span tag.  It should truncate with an ellipsis if it is longer than 50px.</span>

Wenn ich die Standard-jQuery-Methode verwende, um den HTML-Code abzurufen, erhalte ich den vollständigen Text, nicht die abgeschnittene Version. Ich bin mir nicht sicher, ob es überhaupt möglich ist.

html = jQuery('#mySpan').html();
text = jQuery('#mySpan').text();

Beide geben den vollständigen Text zurück. Ich bin ratlos.

  • overflow:hidden statt overflow=hidden

    – Pik_at

    19. Mai 2015 um 14:06 Uhr

  • das müsstest du selbst ausrechnen

    – Daniel A. Weiß

    19. Mai 2015 um 14:06 Uhr

  • Die Kürzung ist nur ein visuelle Wirkung was eigentlich nichts ändert. Sie erhalten den vollständigen Text (in Ihrem DOM) natürlich über die text() oder html() Methode.

    – Renfei-Lied

    19. Mai 2015 um 14:08 Uhr


  • Der Text ist bereits im DOM festgelegt, Ellipsen dienen nur zum Stylen

    – Pik_at

    19. Mai 2015 um 14:09 Uhr

  • Verwandte stackoverflow.com/questions/777340/…

    – Benjamin Grünbaum

    19. Mai 2015 um 14:33 Uhr

Benutzer-Avatar
Denys Séguret

Sie können es berechnen:

$.fn.renderedText = function(){
  var o = s = this.text();
  while (s.length && (this[0].scrollWidth>this.innerWidth())){
    s = s.slice(0,-1);
    this.text(s+"…");
  }
  this.text(o);
  return s;
}

var renderedText = $("#mySpan").renderedText(); // this is your visible string

Demonstration

Das funktioniert natürlich nur bei einem Element mit overflow:hidden;text-overflow:ellipsis aber es ist einfach anzupassen, wenn es keine gibt text-overflow:ellipsis: Entfernen Sie einfach die +"…".

Beachten Sie, dass dies mit allen Browsern kompatibel ist und das genaue Ergebnis liefert (w3.org gibt an, dass die Zeichen vom Browser verwendet werden soll).

  • Vielen Dank! Das hat bei mir super funktioniert. Ich konnte nicht wirklich herausfinden, wie man Auslassungspunkte in VI eingibt, aber ich habe dafür gesorgt, dass es für das funktioniert, was ich brauche.

    – Steve Cersosimo

    19. Mai 2015 um 16:43 Uhr

  • Verwenden Sie die Compose-Taste: Compose + . + . → …

    – Schlank

    19. Mai 2015 um 16:54 Uhr


@dystroy hat eine nette Antwort gegeben, hier ist jedoch eine andere (zukunftsfreundlichere) Möglichkeit, dies zu tun.

Wir können benutzen document.caretPositionFromPoint. Dies ist fast eine reine FF-Funktion, aber die meisten anderen Browser bieten dasselbe unter ihrem eigenen Funktionsnamen und ihrer eigenen API. Nein, ich weiß nicht, was Browser gegen Entwickler haben, aber na ja …

Unsere Methode funktioniert so:

  • Element auswählen
  • Holen Sie sich eine begrenzte Client-Position
  • Fügen Sie es in die obige Funktion ein, um die Position des Textversatzes zu erhalten
  • subtrahieren Sie 3 davon, um das Ellipsen-Ding aus dem Offset zu entfernen
  • Extrahieren Sie Text gemäß diesem Offset von textContent Eigentum

Hier ist eine kurze Demo (sollte in Webkit und Gecko richtig funktionieren):

function getRenderedText (el) {
  var pos = el.getBoundingClientRect();
  var offset, range;
  if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(pos.right, pos.top);
    offset = range.endOffset - 3;
  }
  else if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(pos.right, pos.top);
    offset = range.offset - 3;
  }
  else {
    console.error('Your browser is not supported yet :(');
  }
  return el.textContent.slice(0, offset);
}

console.log(getRenderedText(el));
span {
  text-overflow: ellipsis;
  width: 40px;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}
<span id="el">foo bar is so much awesome it is almost the bestest thing in the world. devs love foo bar. foo bar all the things!</span>

Ich habe in einigen Fällen (seltsame Schriftarten oder Randfälle) einen Fehler von maximal 1 Zeichen gesehen, aber meistens funktioniert es gut.

Ich hoffe, das hilft!

  • Ausgezeichnete Antwort und verprügelt das DOM auch nicht!

    – sidonaldson

    19. Mai 2015 um 15:11 Uhr

  • Deutlich sein, document.caretRangeFromPoint funktioniert in Chrome (im Beispiel zu sehen).

    – Shaun Lebron

    28. Januar 2019 um 8:27 Uhr

1094060cookie-checkGibt es eine Möglichkeit, den abgeschnittenen CSS-Text über jQuery abzurufen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy