So übernehmen Sie den Ergebnistext, wenn die Textüberlauf-Eigenschaft angewendet wird

Question

Ich habe ein div mit css-Eigenschaft text-overflow : ellipsis, um Ellipsen hinzuzufügen und den Text in einer einzelnen Zeile anzuzeigen.

Wenn ich jquery .text() oder .html() ausführen, bekomme ich die vollständige Zeichenfolge, aber ich brauche den genauen Text im Div angezeigt (nicht die vollständige Zeichenfolge).

Kann mir jemand erklären, wie man den exakt angezeigten String mit jQuery oder JS aufnimmt?

Actual String = "abcdefghijklmnop" Durch CSS, die div zeigt "abcd..."

Mein erwartetes Ergebnis (mit jQuery oder JS) "abcd..."

Answer 1

Dies ist nicht möglich, ohne zu versuchen, CSS zu imitieren und die Saiten mit der neu erstellen Ellipsen mit JS.

Der Grund dafür ist, dass CSS nur das manipuliert, was dem Benutzer angezeigt wird, nicht die HTML-Quelle selbst. Sie können dies überprüfen, indem Sie den Quellcode für Ihr Dokument überprüfen. Das heißt, wenn Sie .text() oder .html() verwenden, erhalten Sie die Werte aus dem DOM und nicht, was über den CSS-Filter angezeigt wird.

Es gibt ein paar Hacks, die einen ziemlich guten Job machen, aber es ist immer noch keine Garantie, dass der JS korrekt nachahmt, wie CSS den Text rendert.

Answer 2

Wenn Sie die Anzahl der Werte wissen müssen Sie jedes Mal, dann können Sie nur JS Wie zum Beispiel verwenden, wenn es immer 4 Werte sind, die in eingegeben wird, als es so sein würde,

JS Fiddle

Form

<form action="" method="post"> 
    <p> 
    <label for="txt">My txt: </albel> 
     <input type="text" id="myTxt"><br /> 
    <input type="submit" id="submitButton" value="Send"> 
    </P> 
</form> 

js

document.getElementById('submitButton').onclick = function() { 

    myVariable = document.getElementById("myTxt").value; 
    alert(myVariable.slice(0, 4)); 
}; 

Egal was in das Textfeld eingegeben wird, es wird in die ersten 4 Zeichen aufgeteilt.