Truncating link

I want the behavior of the link you see at the top. For the link to truncate I had to set it to block but this means that it fills its container, so on hover works on spots it shouldnt and the border is not right. Inline-block did not fix because truncation stopped working, any ideas?
19 Replies
Perfect
Perfect17mo ago
Perfect
Perfect17mo ago
<a
href={link.url}
target="_blank"
className={cn(
buttonVariants({ variant: "link" }),
"-ml-0.5 block h-auto min-w-0 truncate p-1 px-0.5 text-sm text-muted-foreground"
)}
>
{link.url}
</a>
<a
href={link.url}
target="_blank"
className={cn(
buttonVariants({ variant: "link" }),
"-ml-0.5 block h-auto min-w-0 truncate p-1 px-0.5 text-sm text-muted-foreground"
)}
>
{link.url}
</a>
whatplan
whatplan17mo ago
<a
href={link.url}
target="_blank"
className={cn(
buttonVariants({ variant: "link" }),
"-ml-0.5 block h-auto min-w-0 truncate p-1 px-0.5 text-sm text-muted-foreground"
)}
>
{link.url.split("?")[0]}
</a>
<a
href={link.url}
target="_blank"
className={cn(
buttonVariants({ variant: "link" }),
"-ml-0.5 block h-auto min-w-0 truncate p-1 px-0.5 text-sm text-muted-foreground"
)}
>
{link.url.split("?")[0]}
</a>
Perfect
Perfect17mo ago
@whatplan (Rustular Devrel) could you explain this solution a bit? I see your changing what the link content is but otherwise not sure
whatplan
whatplan17mo ago
the a tag has 2 parts, the href which is what your linking to, and the children which is what is actually "clickable" so the only thing I changed what just make the content thats clickable the truncated part of the url
Perfect
Perfect17mo ago
Oh yeah I got that, I think I explained the issue wrong sorry I just want the content of the a tag to be around the text (and to truncate when it gets too long). But the way I have it atm makes the content box sometimes bigger than it needs to be (if the title has a width larger) so in this, you see the hover area and border on focus is not good
whatplan
whatplan17mo ago
the part that gets truncated do you ever that need to be visable ever or is the only part that the user should ever see is the beginning of the link
Perfect
Perfect17mo ago
I would like the user to be able to see as much as possible
whatplan
whatplan17mo ago
OH 1 sec can you send like the stuff that surrounds it
Perfect
Perfect17mo ago
Yeah sure
<div className="flex min-w-0 items-center">
<SimpleTooltip message="Reorder">
<Button
variant="ghost"
className="-ml-1 touch-none p-1"
{...listeners}
ref={setActivatorNodeRef}
>
<DragHandleDots2Icon className="h-10 w-6" />
<span className="sr-only">Reorder</span>
</Button>
</SimpleTooltip>
<div className="ml-4 min-w-0 space-y-2">
<div className="flex items-center">
<p className="truncate">{link.title}</p>
<SimpleTooltip message="Edit Title">
<Button variant="ghost" className="ml-1.5 h-auto p-1">
<Pencil2Icon className="h-4 w-4" />
<span className="sr-only">Edit Title</span>
</Button>
</SimpleTooltip>
</div>

<-- THE LINK -->
<a
href={link.url}
target="_blank"
className={cn(
buttonVariants({ variant: "link" }),
"-ml-0.5 block h-auto truncate p-1 px-0.5 text-sm text-muted-foreground"
)}
>
{link.url}
</a>
<-- THE LINK -->

</div>
</div>
<div className="flex min-w-0 items-center">
<SimpleTooltip message="Reorder">
<Button
variant="ghost"
className="-ml-1 touch-none p-1"
{...listeners}
ref={setActivatorNodeRef}
>
<DragHandleDots2Icon className="h-10 w-6" />
<span className="sr-only">Reorder</span>
</Button>
</SimpleTooltip>
<div className="ml-4 min-w-0 space-y-2">
<div className="flex items-center">
<p className="truncate">{link.title}</p>
<SimpleTooltip message="Edit Title">
<Button variant="ghost" className="ml-1.5 h-auto p-1">
<Pencil2Icon className="h-4 w-4" />
<span className="sr-only">Edit Title</span>
</Button>
</SimpleTooltip>
</div>

<-- THE LINK -->
<a
href={link.url}
target="_blank"
className={cn(
buttonVariants({ variant: "link" }),
"-ml-0.5 block h-auto truncate p-1 px-0.5 text-sm text-muted-foreground"
)}
>
{link.url}
</a>
<-- THE LINK -->

</div>
</div>
Perfect
Perfect17mo ago
Perfect
Perfect17mo ago
and maybe that helps
whatplan
whatplan17mo ago
it does because the width of the a looks right which is good because then we know its a text styling thing
Perfect
Perfect17mo ago
Well, I thought the width was too much because it seems like it should just be around the text but I have to use block for the truncation to work
whatplan
whatplan17mo ago
uh im a bit stumped sorry
Perfect
Perfect17mo ago
Like of the issue or how to fix?
whatplan
whatplan17mo ago
how to fix
Perfect
Perfect17mo ago
Cause maybe I am just being super unclear haha Ah ok yeah I got no clue ill try chat gpt fixed Had to wrap a tag in flex div but keep a tag as block
Want results from more Discord servers?
Add your server