truncate style does not work
Hi guys, I apply truncate to p tag but it does not work. Cany anyone help me explain why?
6 Replies
https://codesandbox.io/p/sandbox/cart-item-6m5fyy?file=%2Fsrc%2FApp.tsx
Here is codesandbox
It looks like your p is wider than it should be. So it cannot clip the text.
I would have a look at the parent containers first. Maybe are wider too.
I guess I’ll have a look
The drawer component I have set maxWidth to 500px
Maybe because of this div. But How can I fix it?
Im not good at react but your flex is causing this issue. Removing display: flex made it work.
That’s not the solution but that’s what i found out so far.
Maybe it helps solving the issue.
https://semicolon.dev/tutorial/css/text-overflow-ellipsis-doesnt-work
Maybe this helps?
Semicolon.dev
How To Fix Text-Overflow Ellipsis Not Working
Ellipsis CSS not working with Flex? Why is text-overflow ellipsis multiline not working? How to make text-overflow ellipsis work in a flex container? How to make text-overflow: ellipsis work with 2 lines? How to make text-overflow: ellipsis work without width. Why text-overflow ellipsis doesn't work? Your text overflow ellipsis not working (not ...
Thanks. It worked