javascript - 有没有一种方法可以根据 height-Javascript 计算一个 div 元素可以占用的字符数

Question

我有元素:

<div class="show">Lorem ipsum dolor sit .</div> 

CSS:

.show {
height: 300px;
width: 600px;
}

所以在呈现此 div 之前，有没有办法知道此 div 可以容纳多少字符数。我有多行，我的 div 包含多个元素，例如:

https://jsfiddle.net/pvyk3etw/

到目前为止我已经试过了: count how many characters fit in a DIV

还使用了线夹

但因为我的目标不仅仅是添加省略号，它还需要在它旁边添加一些文本——比如 ...more 简单的 css overflow 属性不起作用。简单来说:我有

height = 300;
width= 600;

根据上面的数字，我们可以算出 div 容器可以容纳多少个字符吗？

请务必让我知道我可能错过检查的任何资源。谢谢

Answer 1

接续评论:

“您可以使 div 隐藏或以其他方式呈现在可见 View 之外。用您知道会溢出的字符填充它。然后在相对 Y 超过边界时进行条件处理，同时跟踪计数字符。因此形成一个循环。当相对 Y 越过界限时，打破循环。只是算法的一个想法。”

以下代码(可运行)可能会解决问题，或者即使需要改进，也会解决上述评论中的概念。这是一个“迭代”解决方案，因此要插入的内容的长度在执行时按时间增加 1:1:

function determineMaxCharsBeforeOverflow(el, boundedHeight) {
    // where el is the DOM element of the "span" within the div
    // where boundedHeight is the height of the container "div"
    let i;
    let n; // char count
    let m = 100000000; // arbitrary large number
    for (i = 0; i < m; i++) {
        el.innerHTML += "m"; // `m` is used since thats what an em is, i think
        let h = el.offsetHeight; // or use whatever cross-browser equivalent
        // console.log("h: " + h);
        if (h > boundedHeight) {
            return i; // can return i safely, i think, since we want a Base 1 result before overflow, even though i is Base 0. Might need tweaking in practice.
        }
    }
    return -1; // returns -1 on failure, meaning m needs to be increased for the bound

}

function testFunc() {
    let el = document.getElementById("test_data");
    let height = 300; // hard coding here, you can replace with dynamic pixel height
    console.log( determineMaxCharsBeforeOverflow( el, height ) );
}

.clip {
    overflow:hidden;
    overflow-wrap: anywhere; /* or its cross-browser-equivalent */
}

.show {
    border: 1px solid red; /* removable */
    height: 300px;
    width: 600px;
}
.show .hidden {
    left:-300px; /* matches width of .show */
}

<div id="actual" class="show"></div> 
<div id="test" class="show clip _hidden"><span id="test_data"></span></div> <!-- remove underscore on hidden class for production -->
<button type="button" onclick="testFunc()">Click</button>

所有其他解释都在代码注释中。

注意:一些填充/边距问题可能需要与此解决方案分开应用。