Cách lấy văn bản kết quả khi thuộc tính tràn luồng văn bản được áp dụng

Question

Tôi có một div có thuộc tính css text-overflow : ellipsis để thêm dấu ba chấm và hiển thị văn bản trong một dòng.

Khi tôi thực hiện jquery .text() hoặc .html(), tôi nhận được chuỗi đầy đủ, nhưng tôi cần văn bản chính xác hiển thị trong div hiện tại (không phải chuỗi đầy đủ).

Một số người có thể hướng dẫn tôi cách lấy chuỗi hiển thị chính xác bằng jquery hoặc JS không?

Chuỗi thực tế = "abcdefghijklmnop" Do CSS, div hiển thị "abcd..."

kết quả mong đợi của tôi (sử dụng jQuery hoặc JS) "abcd..."

Answer 1

này là không thể không cố gắng để bắt chước CSS và tạo các dây với dấu ba chấm sử dụng JS.

Lý do cho điều này là CSS chỉ thao túng những gì được hiển thị cho người dùng chứ không phải chính nguồn HTML. Bạn có thể xác minh điều này bằng cách kiểm tra mã nguồn cho tài liệu của bạn. Điều này có nghĩa là khi bạn sử dụng .text() hoặc .html() bạn sẽ nhận được các giá trị từ DOM, thay vì những gì được hiển thị thông qua bộ lọc CSS.

Có một vài hack làm một công việc khá tốt, nhưng nó vẫn không đảm bảo rằng JS chính xác bắt chước cách CSS hiển thị văn bản.

Answer 2

Nếu bạn biết số lượng các giá trị mà bạn cần mỗi lần sau đó bạn chỉ có thể sử dụng JS Giống như ví dụ nếu nó luôn 4 giá trị đó được nhập vào hơn nó sẽ là như thế này,

JS Fiddle

hình thức

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

Bất kể nội dung được nhập vào hộp văn bản, nó sẽ được cắt thành 4 ký tự đầu tiên.