为什么 line-clamp-1 和 truncate 不能与我的锚链接一起使用？

Answer 1

这是可行的解决方案。我从截断锚点的父级中删除了一些 Flex 类，更准确地说是从父级中删除了

items-center

并添加了

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>

这是工作示例