Applying calc(infinity * length) to text-related CSS properties such as text-indent, word-spacing, and letter-spacing produces extreme horizontal overflow and causes glyphs to be positioned offscreen or wrapped unusually. The visual outcomes across modern browsers appear similar, with minor height differences likely tied to line-height handling. Large indents can push initial characters entirely out of view and force wrapping onto subsequent lines. When inspecting computed values, implementations diverge: Safari and Firefox maintain internal consistency but differ by many orders of magnitude, while Chrome exhibits unclear or unpredictable computed-value behavior.
When last we met, I'd just finished up messing with font sizes and line heights, and that made me think about other text properties that accept lengths, like those that indent text or increase the space between words and letters. You know, like these: div:nth-of-type(1) {text-indent: calc(infinity * 1ch);} div:nth-of-type(2) {word-spacing: calc(infinity * 1ch);} div:nth-of-type(3) {letter-spacing: calc(infinity * 1ch);} <div>I have some text and I cannot lie!</div> <div>I have some text and I cannot lie!</div> <div>I have some text and I cannot lie!</div>
Visually, these all came to exactly the same result, textually speaking, with just very small (probably line-height-related) variances in element height. All get very large horizontal overflow scrolling, yet scrolling out to the end of that overflow reveals no letterforms at all; I assume they're sat just offscreen when you reach the end of the scroll region. I particularly like how the "I" in the first <div> disappears because the first line has been indented a few million (or a few hundred undecillion) pixels, and then the rest of the text is wrapped onto the second line.
Collection
[
|
...
]