ellipses

Benchmark created on November 14, 2024

Preparation HTML

<div id="text"> 
Sid the sloth was not like his brethren. While they hung languidly from the branches, Sid would be scampering (well, "scampering" in sloth terms) towards the local village bakery. His nose twitched with anticipation, his claws tapping excitedly on the dusty path. Forget the allure of mangoes and figs, Sid craved the warm, gooey deliciousness of freshly baked chocolate chip cookies. The bakery lady, a kindly woman with flour-dusted hands, knew his order by heart. Two cookies, slightly warmed, with a side of chilled hibiscus tea.

Sid would then make his way to his favorite branch overlooking the valley. With a contented sigh, he'd carefully unwrap his prize. The aroma of vanilla and chocolate filled the air as he took his first bite. The world melted away as the sweetness exploded on his tongue. He'd savor every crumb, every chocolate chip, washing it down with sips of his refreshing tea. This was his ritual, his moment of pure bliss.

The other sloths scoffed at his obsession. "Leaves are life," they'd declare, munching on their greenery. But Sid didn't care. He knew something they didn't. He knew the joy of a perfectly baked cookie, the comfort it brought, the way it made his heart sing. And in his slow, deliberate way, he was living his best life, one cookie at a time.
</div>

Setup

const text = document.getElementById("text");
text.style.width = '2rem';
text.style.height = '2rem';
text.style.overflow = 'hidden';
text.style.whiteSpace = 'nowrap';
text.style.position = 'absolute';

text.style.textOverflow = 'ellipsis';

Teardown

async function animate() {
    const text = document.getElementById("text");
    text.style.transition = 'left 1s linear'; // Animate over 1 second
    text.style.left = '500px'; // Move 500px to the right

    await new Promise(resolve => {
        text.addEventListener('transitionend', resolve, { once: true });
    });
}

animate();

Test runner

const text = document.getElementById("text");
text.style.textOverflow = 'inherit';

const text = document.getElementById("text");
text.style.textOverflow = 'ellipsis';

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on November 14, 2024