Kevin Powell - Community•7mo ago

Text Truncate in CSS

https://codesandbox.io/p/devbox/hf4xqz I have a dropdown component using the Shadcn library. I want to limit the no of letters it can display, Once the length crosses certain threshold, I want to use truncate and display eclipsis. Do we have only way to do it using max-w or do we have any better solution for it. Can you please let me know? I have attached codesandbox

10 Replies

13eck•7mo ago

While I'm unable to look at your code ("The content you're trying to access might not be visible because you're not signed in. You can sign in using the button below.") I can point you to the text-overflow CSS property. Set it to ellipsis and you'll get what you're looking for, assuming the text box is of appropriate size.

stealthyOP•7mo ago

https://codesandbox.io/p/devbox/hf4xqz can you try now? I have already included truncate from tailwind which includes

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

My doubt is with the size only . We don't often give the static size right. we let it responsive using flex.

13eck•7mo ago

If you want to truncate, set a max width. Otherwise there's no reason to truncate, right? :p And yes, now I can see it. But I have no idea how to view the finalized output

stealthyOP•7mo ago

You're right. In VS Code's file explorer, when a file name is too long, it gets truncated with ellipses as the panel is resized. I tried inspecting the styles to understand how it works, but I couldn't find a clear max-width or any obvious truncation logic. Yet, as you resize the panel, the file name dynamically adjusts — it truncates when space is limited and returns to full when there's enough room. That’s why I was wondering if there’s an alternative to using max-width for this kind of responsive truncation.

13eck•7mo ago

My guess is that it's the parent container that's setting the width, so flex or not it's the default 100% wide but if the parent container is smaller than the content width it truncates with the ellipsis

stealthyOP•7mo ago

Ya, there is that possibility. So truncate always works only when there is fixed width right

13eck•7mo ago

No…truncation works when the containing box is smaller than the content. Even a normally dynamically sized element can be truncated for one reason or other

stealthyOP•7mo ago

ok. I have to try it out to understand more. If I get stuck, I will ping here

ἔρως•7mo ago

for the ellypsis to show (cant spell it right) you MUST have overflow that means, the child must have a larger size than the parent and then, the parent has to have overflow hidden

curiousmissfox•7mo ago

Eventually line-clamp will be helpful too, depending on your use case and what kind of support you need , when you have multiple lines of text it will add the ellipses , like text-overflow does Browser support for text-overflow Browser support for line clamp Net Ninja Short demoing both KPow video on line-clamp

MDN Web Docs

line-clamp - CSS: Cascading Style Sheets | MDN

The line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.

MDN Web Docs

text-overflow - CSS: Cascading Style Sheets | MDN

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (…), or display a custom string.

Net Ninja

YouTube

CSS Tips Part 3 - Truncate Text #shorts

Part three in a series of CSS tips and tricks! @NetNinja

Gaming

Programming

Text Truncate in CSS

Did you find this page helpful?