Theo's Typesafe Cult•2y ago

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

PerfectOP•2y ago

PerfectOP•2y 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>

PerfectOP•2y ago

https://cdn.discordapp.com/attachments/637073921719402496/1121836643846991922/Screen_Recording_2023-06-23_at_12.18.01_PM.mov

whatplan•2y 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>

PerfectOP•2y 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•2y 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

PerfectOP•2y 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•2y 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

PerfectOP•2y ago

I would like the user to be able to see as much as possible

whatplan•2y ago

OH 1 sec can you send like the stuff that surrounds it

PerfectOP•2y 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>

PerfectOP•2y ago

and maybe that helps

whatplan•2y ago

it does because the width of the a looks right which is good because then we know its a text styling thing

PerfectOP•2y 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•2y ago

uh im a bit stumped sorry

PerfectOP•2y ago

Like of the issue or how to fix?

whatplan•2y ago

how to fix

PerfectOP•2y 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

Gaming

Programming

Truncating link