Despite finding an old post on this topic, the most popular answer and other solutions didn't work for many people. Even years later, I am still facing the same issue.
My goal is to create a div that is precisely 19 lines tall (ideally aiming for 19.5 lines so there's always half a line visible when scrolling through more text, but starting with 19). However, as I adjust my browser window size, I notice various fractional overflows of text occurring - which is exactly what I want to avoid. Currently, around 19 lines and approximately half are displayed:
https://i.sstatic.net/GJSjl.png
Below you can see the CSS I'm using for both the outer div mentioned above and the inner darker div:
#marquee-dialog > div {
font-size: 3vh;
line-height: 3.6vh;
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
width: 80vw;
height: 80vh;
padding: 1em;
background-color: white; /* Changed via JavaScript later */
color: black;
}
#marquee-big-text {
font-size: 3vh;
line-height: 3.6vh;
max-height: 22.8em;
overflow: auto;
}
I have set the line height to be 1.2 times larger than the font size, and the max-height to be 19 * 1.2 = 22.8 em. Despite these adjustments, it seems like the exact number of lines should be achieved to the best of floating point precision.
Upon checking the web console, the height of the div appears to be almost exactly 19 times the line height and nearly 22.8 times the em size, as confirmed by examining the size of the padding of the outer div.
The inner div has no padding, margin, or border to disrupt the calculations.
Although all numeric values seem to align to give me the desired 19 lines, the rendering displays just slightly more. This overflow is observed on Chrome, Firefox, and Safari alike.
Is there something obvious that I might be missing?
UPDATE
I attempted using exact pixel values derived from the web console:
#marquee-big-text {
font-size: 3vh;
line-height: 31.968px; /* 3.6vh; */
max-height: 607.392px; /* 22.8em; */
overflow: auto;
}
Even after implementing these close-to-exact values for 19 lines, the issue persists.
UPDATE 2
After taking some measurements from a screenshot, I determined that each rendered text line measures 62 pixels in height from baseline to baseline. The entire div spans 1212 pixels in height. Based on these measurements, roughly 19.55 lines should fit within the space, explaining the discrepancy between the expected and actual number of lines. To achieve a closer match to 19 lines, the baseline-to-baseline measurement should be approximately 63.79 pixels, representing around 2 additional pixels per line.
This anomaly appears akin to a rendering round-off error, although it is peculiar that such consistent discrepancies exist across different browsers.
UPDATE 3
Here is a functional example:
https://codepen.io/kshetline/pen/NWNGOWL
Intriguingly, despite simplifying the example, the issue persists in Chrome and Safari, while Firefox consistently renders correctly.
You may need to switch the Codepen view to this orientation:
https://i.sstatic.net/Kv4ZX.png
...to observe the problem. This bug tends to manifest prominently at larger font sizes, where even resizing the browser window only slightly exceeds half a line before reverting back to 19 lines. At this point, it strongly suggests a font-size round-off error, potentially linked to rendering optimization strategies aimed at preventing caching of significant variations in font size.