Hello, community! Could you help me with problem?
I have component:

import { Dot } from '@icons/index';  // icon as text
import { Caption } from '../../Typography';

export function SpecializationsPanel({ specializations }) {
  return (
    <div className="flex items-center gap-[8px] whitespace-nowrap">
      {specializations.map((specialization, index) => (
        <>
          <div key={index} className="text-start font-bold text-gray-600 lg:text-p4">
            {specialization}
          </div>
          {index !== specializations.length - 1 && <Dot />}
        </>
      ))}
    </div>
  );
}

I list all specializations(array of strings) icon separated, but when the component(list) can be longer then parent div width.
I tried line-clamp and truncate from tailwind, but it only works with pure text(i have icons too). Also libs react-truncate and react-truncate-markup aren't compatible with my React version(^18)¯_(ツ)_/¯.
Can i somehow truncate specializations list and replace truncated part with ...(example shown on screenshot)?