Текстовое многоточие, выходящее за пределы ширины компонента ⇐ CSS

[Anonymous]

Я пытаюсь добавить эффект многоточия текста при уменьшении ширины экрана. Я хочу, чтобы многоточие текста возникало, а не сдвигало компоненты экрана. Вот как компонент выглядит на обычном экране устройства:


И вот что происходит на экранах меньшего размера:
[img]https: //i.sstatic.net/E4o2JozZ.png[/img]

Как я пытаюсь, чтобы это выглядело на маленьких экранах:
< img alt="введите здесь описание изображения" src="https://i.sstatic.net/bZtqqPUr.png" />
Это компонент:
const MusicCard = ({
music,
className,
checked,
onClick,
provider,
canPlay
}) => {
return (
className={twMerge(
`w-full p-4 ${checked ? 'bg-music-card' : 'bg-white'} rounded-md flex flex-row justify-between items-center cursor-pointer apple-shadow`,
className
)}
onClick={onClick}
>

{canPlay ? (



) : null}

[img]{music.artworkURL}



This is a long text message

className={`w-[30px] h-[30px] flex ${checked ? 'border-none' : 'border-terciary'} border-1 items-center justify-center rounded-full ml-[30px]`}
>
{checked ? (

) : (

)}




)
}

export default memo(MusicCard)



Подробнее здесь: https://stackoverflow.com/questions/786 ... -component