Question

我有一个带有css属性text-overflow : ellipsis的div来添加省略号并在一行中显示文本。

当我执行jquery .text()或.html()时，我得到完整的字符串，但我需要在div中显示的确切文本（不是完整的字符串）。

有人可以指导我如何使用jquery或JS获取确切的显示字符串吗？

实际字符串= "abcdefghijklmnop" 由于CSS，div显示"abcd..."

我的预期结果（使用jQuery或JS）"abcd..."

Answer 1

如果不尝试使用JS模拟CSS并使用省略号重新创建字符串，这是不可能的。

原因是CSS只操纵显示给用户的内容，而不是HTML源本身。您可以通过检查文档的源代码来验证这一点。这意味着当您使用.text()或.html()时，您将从DOM获取值，而不是通过CSS过滤器显示的值。

有一些黑客可以做得很好，但仍然不能保证JS正确模仿CSS渲染文本的方式。

Answer 2

如果您知道每次所需的值的数量，那么您可以使用JS例如，如果它总是输入4个值而不是像这样，

JS Fiddle

形式

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

无论在文本框中键入什么内容，它都会被切成前4个字符。

如何在应用文本溢出属性时获取结果文本

2 个答案: