Why is line-clamp-1 and truncate not working with my anchor link?

I'm developing a simple webapp on Windows in PHP and Laravel with TailwindCSS. This is my card.blade.php:

<div class="flex flex-col items-center justify-center h-[300px] w-[200px] rounded-md bg-blue-800 m-2">
        <div>
            <img class="rounded-md" src="https://picsum.photos/seed/{{rand(1, 1000)}}/175">
        </div>
        <div class="flex flex-col items-center leading-none p-1">
            <a class="w-full font-bold text-xl" href="">{{$product->title}}</a>
            <a href="">{{$product->artist}}</a>
        </div>
        <div class="flex flex-col items-center text-xs">
            <a>Release date: {{$product->date}}</a>
            <a>Release genre: {{$product->genre}}</a>
            <a>Release format: {{$product->format}}</a>
        </div>
    </div>

As per the screenshot, the text is overflowing and occupying more space than needed. I have tried class="truncate" and class="line-clamp-1" to the {{$product->title}} anchor link, to no avail. I have also tried Firefox and Opera, which produces the same result.

How do I fix this? Thanks in advance.

Here is the working solution. I removed some flex classes from the parent of truncated anchor, more precisely items-center from the parent and added w-full

<div class="flex flex-col items-center justify-center h-[300px] w-[200px] rounded-md bg-blue-800 m-2">
  <div>
    <img class="rounded-md" src="https://picsum.photos/seed/{{rand(1, 1000)}}/175">
  </div>
  <div class="flex flex-col leading-none p-1 w-full">
    <a class="font-bold text-xl truncate" href="">{{$product->title}}</a>
    <a href="">{{$product->artist}}</a>
  </div>
  <div class="flex flex-col items-center text-xs">
    <a>Release date: {{$product->date}}</a>
    <a>Release genre: {{$product->genre}}</a>
    <a>Release format: {{$product->format}}</a>
  </div>
</div>

Here is the working example