CSS text-overflow: ellipsis not working
Hello, I am using grids to layout my elements, so I am controlling the size of the child elements using the parent element. Which results in my child having not specified sizes but have size which has been decided by the parent elements gird properties.
Now when I try to apply text-overflow: ellipsis to my #title span or #description span, it does not work.
I tried to give fixed size in pixels to the title but it didnt work either.
What I am trying to achieve is that first four spans should have equal width which I already have through my grid columns set to 1fr. But i want that if a title is too long, it gets the ellipsis style.
Same for the description, if its too long, it gets the ellipsis.
The first ss is of how it should look.
The other two ss are of how its looking.
Also, here is the codepen, on bigger screens, it might look normal as the cards are flexible based on the screen sizes. Thats the reason I shared my ss.
https://codepen.io/Zeshan-Merchant/pen/NWeQpZW
For bigger screen sizes, I am going to increase the card sizes, so I think if this ellipsis issue is fixed, with bigger cards , it would still have ellipsis and thats how I want.
Inside the css
These are the selectors related to my problem.
18 Replies
This is how its looking right now
I want all the title to have equal width so the layout does not change
It needs to tweaking since I made it , but basically it needs these 3 styles. To be either
display: block or inline-block, overflow: hidden and text-overflow: ellipsis (it also needs white-space: nowrap but you already have that, mentioning it for completeness)
for both the title and description?
because in the ss u shared, it works only for description
Wherever you want text to have an ellipsis
Hey, it did work, but then my description span has no flex properties now
i used flexbox to vertically and horizontally center align them
I closed your website and my internet is so painfully slow #off-topic it's not opening again to have a look
Did you use
inline-flex?
Just whatever the text is inside needs to be block with the other properties
You may need to wrap it in another elementoh no, actually the previous design used wrapper divs, but to improve the code , i used grids.
not working, it applies flex but not the ellipsis.
i dont know what should I do to make it work
I meant did you use that as a why to it not working. Not to use it as
inline-flex isn't block
I can't see because your website still hasn't loaded for mehttps://codepen.io/Zeshan-Merchant/pen/NWeQpZW
can u check it again?
also, i didnt quiet understand what you meant here.
My internet right now is 60Kbps, nothing is loading. I cannot load up the website right now
oh. Okay I will tell what i tried.
I tried to add display block to #description and it worked but I lost my flex properties
Everything you need is right here
I guess I overwrote the
flex, in that case put the text in another element or something and then apply the styles to thatso you mean wrap the description span with another element?
after doing this, i got this result.
Whatever is needed to make it look like it was before, there's no one solution
Okay, np.
The reason i implemented grid from flexbox is because grid works for column and rows. I need to figure out something else to make it work.
I did make it work, i added display block to title and description for ellipsis to work, and for the centering, i used text align center and padding 1 rem, which works because its relative to my font.
Thanks for your help.