Javascript: Graf sichtbare Zeichen in div

Question

Ich habe eine div, die Text (eine Zeichenfolge der Länge S) einer beliebigen Länge, aber eine feste Größe enthält. Ab einer gewissen Länge (nennen wir es L) wird der Text abgeschnitten und der Rest des Textes ist nicht mehr sichtbar. (Technisch gesehen ist der Bereich [0,L) sichtbar, der Bereich [L,S) ist nicht).

Was ich tun möchte, ist die Länge L für den Text zu finden, indem nur die sichtbar Anzahl der Zeichen in den div zählen. Alle Zeichen außerhalb des Grenzwerts sollten nicht berücksichtigt werden.

Ich bin froh, 3rd-Party-Bibliotheken wie jQuery etc zu verwenden, wenn das die Arbeit erledigt!

Answer 1

Hier ist eine Funktion, die ich für das Trimmen Text gemacht:

function getTextThatFits(txt, w, fSize, fName, fWeight) { 
    if (fWeight === undefined) 
     fWeight = "normal"; 

    var auxDiv = $("<div>").addClass("auxdiv").css ({ 
     fontFamily : fName, 
     fontSize : parseInt(fSize) + "px", 
     position: "absolute", 
     height: "auto", 
     marginLeft : "-1000px", 
     marginTop : "-1000px", 
     fontWeight: fWeight, 
     width: "auto" 
    }) 
    .appendTo($("body")) 
    .html(txt); 

    var ww = (auxDiv.width() + 1); 
    var str = txt; 

    if (ww > w) 
    { 
     var i = 1, p = 1, u = txt.length, sol = 0; 

     while (p <= u) 
     { 
      i = (p + u) >> 1; 
      str = txt.slice(0, i); 
      auxDiv.html(str); 
      ww = (auxDiv.width() + 1); 
      if (ww <= w) { 
       sol = i; 
       p = i + 1; 
      } 
      else u = i - 1; 
     } 

     str = txt.slice(0, sol); 
    } 
    $(".auxdiv").remove(); 
    auxDiv.remove(); 
    return str.length; 
} 

Ich bin für die Suche nach dem Text binäre Suche, das in eine bestimmte Breite paßt. Um die Funktion zu nutzen, müssen Sie es so nennen:

getTextThatFits(yourText, divWidth, fontSize, fontName, fontWeight=optional)