On my platform, users have the ability to create albums and give them names of any length. When a user creates an album, it generates a div along with a link (the album's name) and two icons. I am looking to implement a feature where if a user enters a name that is longer than the width of the container, the name will be truncated with ellipsis (...) just before reaching the edge of the container. However, the size of these containers can vary based on the user's screen size. Currently, the implementation always truncates long album names with ellipsis even if more text could fit in the container.
page.js
'use client';
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrashCan, faPenToSquare } from '@fortawesome/free-solid-svg-icons';
import Link from 'next/link';
import axios from 'axios';
import Header from '@/components/Header';
export default function AlbumsPage() {
// State variables and functions
}