从 textNode 获取固定的（带有省略号）textContent

Question

如何从 javascript 中的节点获取限制文本？见以下代码：

console.log(document.getElementById("text1").textContent);
// prints "This is a long text"


console.log(document.getElementById("text2").textContent);
// prints "This is a long text as well"
// expected "This is a long text a..."

.longtext {
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<div id="text1">This is a long text</div>
<div class="longtext" id="text2">This is a long text as well</div>

我想从 ID 为 text2 的元素中获取预期的 "This is a long text a..."。

Answer 1

我发现了类似的问题：How can I access the actual text that is displayed in a DIV when using CSS style overflow: hidden?

简而言之：

There's no easy way to do it. You have to calculate how much text can be visible in the DIV based on div size, font size, font type and text offset inside div

如何用js做省略号http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

Answer 2

运行您的代码片段，如您所愿，它工作正常。 'text-overflow: ellipsis' 按预期工作。这是工作代码 https://jsfiddle.net/qx5mL548/

的 JSFiddle link

不明白你遇到的是什么类型的问题。您可以尝试此代码，如果有效请告诉我：

<html>
<head>Ellipsis</head>
<style>
       .longtext {
           width: 140px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
        }
    </style>
    <body>
        <div id="text1">This is a long text</div>
        <div class="longtext" id="text2">This is a long text as well</div>  
    </body>
</html>

从 textNode 获取固定的（带有省略号）textContent

Get clamped (with ellipsis) textContent from textNode

html

javascript

css

ellipsis