Jak pobrać tekst wyniku, gdy właściwość przepełnienia tekstu zostanie zastosowana

Question

Mam element div z właściwością css text-overflow : ellipsis, aby dodać ellipsis i wyświetlić tekst w jednym wierszu.

Kiedy wykonuję jquery .text() lub .html(), otrzymuję pełny ciąg znaków, ale potrzebuję dokładnego tekstu wyświetlanego w dziale div (nie pełnym ciągiem znaków).

Czy ktoś może mi podpowiedzieć, jak pobrać dokładny ciąg znaków za pomocą jquery lub JS?

rzeczywista String = "abcdefghijklmnop" związku z CSS div wyświetla "abcd..."

Moje oczekiwanego rezultatu (przy użyciu jQuery lub JS) "abcd..."

Answer 1

Nie jest to możliwe bez próbując naśladować CSS i odtworzyć ciągi Europejska elipsa używająca JS.

Powodem tego jest to, że CSS manipuluje tylko tym, co jest wyświetlane użytkownikowi, a nie samym źródłem HTML. Możesz to sprawdzić, sprawdzając kod źródłowy dokumentu. Oznacza to, że podczas korzystania z .text() lub .html() otrzymujesz wartości z DOM, a nie to, co jest wyświetlane przez filtr CSS.

Istnieje kilka hacków, które wykonują całkiem niezłą robotę, ale nadal nie ma gwarancji, że JS poprawnie naśladuje sposób, w jaki CSS renderuje tekst.

Answer 2

Jeśli znasz liczbę wartości trzeba za każdym razem, to można po prostu użyć JS jak na przykład jeśli zawsze było 4 wartości, które zostanie wprowadzone niż byłoby to w ten sposób,

JS Fiddle

Formularz

<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)); 
}; 

Bez względu na to, co jest wpisane w polu tekstowym, zostanie podzielone na 4 pierwsze znaki.