is there a way to count the number of chars a div element can take based on height-Javascript

Question

I have element:

Lorem ipsum dolor sit .

css:

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

so before this div is rendered, is there a way to know how much chars count this div can hold. I have multiple line and my div contains multiple elements inside it ex:

https://jsfiddle.net/pvyk3etw/

I have tried so far this : count how many characters fit in a DIV

and also used line-clamp

but because my goal is not just to add ellipsis, it also needs some text next to it- like ...more simple css overflow property does not work. in simple words: I have

height = 300;
width= 600;

based on above numbers can we in anyways count how character count that div container can hold?

please do let me know for any resourses I may missed to check out. thx

user_1780873 · Answer

In continuation from comments:

"You could render the div hidden or otherwise off the visible view. Fill it with chars that you know will overflow. Then condition when the relative Y goes past the bounds, while keeping track of the count chars. Hence a loop. When the relative Y goes past the bounds. break the loop. Just an idea for an algorithm."

The following code (runnable) might address the issues, or even if needing improvement, will address the concept in the above comment. It's an "iterative" solution, so the length of the content to be inserted, is 1:1 on time increase on execution:

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 */
}

All other explanation is in the code comments.

Note: Some padding / margin issues may need to applied separately from this solution.

is there a way to count the number of chars a div element can take based on height-Javascript

1 Answers