How to get result text when using text overflow property

Question

I have a div with the css text-overflow : ellipsis to add ellipsis and show text on one line.

When I execute jquery .text() or .html() , I get the full line, but I need the exact text displayed in the div at the moment (and not the full line).

Can someone explain to me how to take the exact display string using jquery or JS?

Actual line = "abcdefghijklmnop" Thanks to CSS, the div displays "abcd..."

My expected result (using jQuery or JS) is "abcd..."

Answer 1

This is not possible without trying to simulate CSS and recreate lines using ellipsis using JS.

The reason for this is that CSS only controls what is displayed to the user, and not the HTML source itself. You can verify this by checking the source code for your document. This means that when using .text() or .html() you get the values ​​from the DOM, and not what is displayed through the CSS filter.

There are a few hacks that do pretty good work, but there is still no guarantee that JS correctly mimics how CSS renders text.

Answer 2

If you know the number of values ​​that you need each time, you can simply use JS For example, if 4 values ​​were entered into it, than it would be,

Js fiddle

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

Regardless of what is entered in the text field, it will be cut with the first four characters.