This can be a bit complicated.

For one, showing the number takes away from the available space, which could cause one more item to be truncated, so trying to simply calculate sizes and trying to figure out how many would fit would be difficult.

The easiest method probably would be to:

• Set up a wrapper element around everything whose size changes trigger a re-fitting of the items.
• Set up a wrapper around the items text which can be used to detect an overflow
• Reduce the amount of items incrementally until no more overflow occurs.

The structure would be something like this:

<span class="root" bind:this={root}>
    <span class="outer" bind:this={outer}>
        <span class="inner" bind:this={inner}>
            {emailsString}
        </span>
    </span>

    <span class="counter" bind:this={counter}
                class:show={overflow}>
            +{emails.length - displayedEmailCount}
    </span>
</span>

The code to update everything could use ResizeObservers like this:

onMount(() => {
    const containerObserver = new ResizeObserver(throttle(refit));
    containerObserver.observe(root);

    const overflowObserver = new ResizeObserver(throttle(updateDisplayCount));
    overflowObserver.observe(outer);
    overflowObserver.observe(inner);
    overflowObserver.observe(counter);
    
    return () => {
        containerObserver.disconnect();
        overflowObserver.disconnect();
    }
});

async function refit() {
    // Container size changed, reset display count because potentially
    // more items could fit now.
    displayedEmailCount = emails.length;
    await tick(); // Lets Svelte update the DOM
    await updateDisplayCount();
}
async function updateDisplayCount() {
    if (inner == null || outer == null)
        return;
    
    // Reduce count until items fit or no items are displayed
    while (inner.offsetWidth > outer.offsetWidth && displayedEmailCount > 0) {
        displayedEmailCount -= 1;
        await tick(); // Lets Svelte update the DOM
    }
}

$: displayedEmailCount = emails.length;
$: overflow = emails.length > displayedEmailCount;
$: emailsString = emails.slice(0, displayedEmailCount).join( ,  ) + overflowSuffix;
$: overflowSuffix =
    overflow == false ?    :
    displayedEmailCount > 0 ?  , ...  :  ... ;

(throttle is a function that ensures that code is only executed at most once per frame. Can be a performance optimization when an API calls a function/raises an event many times per frame.)

This could still be further improved, e.g. by only resetting the display count when the container grows, not when it shrinks.

Full REPL example - Resize the splitter between code and rendered result to cause trunctation.