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

How to take result text when text-overflow property is applied

本文关键字：文本 属性 获取 结果 溢出 应用 应用文      更新时间：2023-09-26

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

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

可以有人指导我如何采取使用jquery或JS确切显示字符串?

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

我的预期结果(使用jQuery或JS) "abcd..."

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

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

有几个技巧做得很好，但仍然不能保证JS正确地模仿CSS呈现文本的方式。

如果你知道每次需要的值的数量那么你可以使用JS例如，如果总是输入4个值那么它就会像这样，

JS小提琴

形式
<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个字符。

相关文章：