Tengo TagsInput donde el usuario puede ingresar cualquier dato (se supone que son enlaces). Dado que los enlaces pueden ser muy largos, necesito una forma de acortar su visualización para que la ventana no se estire demasiado. Lo resolví con white-space: nowrap

Como estoy usando TagsInput , el usuario debería poder eliminar la entrada. Tengo esta funcionalidad. Y como puedes ver, funciona en enlaces cortos. Pero si el enlace es largo, esta cruz está al final y, por tanto, no es visible. Me gustaría que todo se muestre de la siguiente manera (marqué la funcionalidad deseada en rojo):

Por lo tanto, quiero que el usuario pueda eliminar un enlace largo

 .tag { display:flexbox; /* align-items: center; */ margin: 5px 0; margin-right: 5px; padding: 0 5px; border: 1px solid black; border-radius: 5px; color: black; overflow:hidden; text-overflow: ellipsis; max-width: fit-content; white-space: nowrap; }

Por si acaso, la parte del código donde defino el botón para quitar la etiqueta

 ... const deleteTag = (index) => { setTags(prevState => prevState.filter((tag, i) => i !== index)) } return ( <div className={classes.container}> {tags.map((tag, index) => <div className={classes.tag}> {tag} <ClearIcon className={classes.del} fontSize="small" onClick={() => deleteTag(index)} /> </div> )} <input className={classes.input} value={input} placeholder={props.inputPlaceholder} onKeyDown={onKeyDown} onKeyUp={onKeyUp} onChange={onChange} /> </div>); }