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
@whatplan (Rustular Devrel) could you explain this solution a bit?
I see your changing what the link content is but otherwise not sure
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
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
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
I would like the user to be able to see as much as possible
OH
1 sec
can you send like the stuff that surrounds it
Yeah sure
and maybe that helps
it does because the width of the a looks right which is good because then we know its a text styling thing
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
uh
im a bit stumped sorry
Like of the issue or how to fix?
how to fix
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