Truncate text in the middle of a series of divs

I have a component which will, currently, render something out that looks as follows:

Corvid / Games / World of Warcraft / Assets / Character Models / Alliance / Night Elf / Malfurion

I always want the first two items and last two items to be visible, however, I want everything in the middle to truncate into ... if possible. That is to say, if the string above was to overflow the containing div, it should have the following result

Corvid / Games / ... / Night Elf / Malfurion

I have tried making a structure like as follows:

<div className={styles.container}>
  <div className={styles.first}>
    {/** Contains first two items */}
  </div>
  <div className={styles.truncate}>
    {/** N arbitrary path items */}
  </div>
  <div className={styles.last}>
    {/** Last two items */}
  </div>
</div>

Could this be achieved with CSS?