For overflow in a textbox, I know we have the scroll option and the “cutoff” option. However, we would like it to show the ellipsis (…) where it cuts off due to the size of the block. I am assuming this is something we will need code for. Does anyone know how to do this? Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Place a custom code component anywhere in the page, or use the custom code box at site level (use the Head one) and put this code:
.truncate { white-space: nowrap; text-overflow: ellipsis; }
Now add the truncate class to any element and you’ll get an ellipsis for the overflow.
Be aware that you’ll see the results in the designer only if you use the custom code component method, rather than the box at page or site level. If you have a navbar that is a symbol on all page, you can place your custom code inside of it for conveniency, as it will get all benefits (seeing the results inside of the designer and impact all possible pages)
There are 2 conditions for ellipsis to work:
px (pixels). Width in % (percentage) won’t work.overflow:hidden and white-space:nowrap set.That worked. Thank you!!
Vincent, I pasted the code like instructed… Do I change the class = .truncate to the class I want to affect? I’ve tried both options… no results.
Here is my read-only: https://preview.webflow.com/preview/kb-1-0-0?utm_source=kb-1-0-0&preview=b9114f691867f2a9aa1487cd44fa69d8
Any help would be super beneficial! Thank you!
Add it to the class of your element. If your element has a class like .myelement, then add the ellipsis to this class in custom code.
Or add it to a new class and add this new class as combo
Also when you give a read-only link please tell us on what page and what element to look, because I couldn’t find anything related on your site.
Thank you.
Sorry about that, I put the code inside the ‘symbol’ element like you suggested:
Named as: ‘SIDEBAR-NAV-CONTAINER’ or ‘MOBILE-HEAD-NAV’
When you say, add it to the class, does that mean I paste the code into : HTML EMBED and then put the ‘HTML EMBED’ into the symbol?
Here are some images for how I have it set up…
Ok add this code:
<style>
.truncate {
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
Then add the combo:
http://vincent.polenordstudio.fr/snap/Webflow_-_Kill_TV_2018-11-13_14-18-53.png
Then it works.
http://vincent.polenordstudio.fr/snap/Webflow_-_Kill_TV_2018-11-13_14-19-31.png
There are 2 conditions for ellipsis to work:
px (pixels). Width in % (percentage) won’t work.overflow:hidden and white-space:nowrap set.Thank you!!! It works!
Thank you again for really helping me out, even though I had no idea how to implement this!
Look at that now you have a clear idea on how it works 
Was my fault anyway, I think you’d have succeeded if my code had included the nowrap parameter from the start.
Hate to ask after you completing the task!
But any thing I can search for giving the text a ‘set’ width in ‘px’ like stated, but having it scale responsively with this ‘ellipses: overflow’?
Any hint to what to search for and I’ll dig it up!
You need to help me understand the issue, I don’t at the moment. At the moment your block expands naturally like if it was 100%, and that’s ok. And that’s also the case for mobile… so I don’t understand why you need to set the width in px here…
Anyway, if you want to control the width in px, wrap the text in a DIV and set the width on this div.
Well, maybe it’s the way I have the other div’s set up that contain the thumbnail and the ‘titles’ and text.
When I leave the text width at: auto
The thumbnails become off-set, or some of them will be higher than others. It pushes the divs all funky.
I did a ‘vw’ on the text, which worked great, except when you exceed 1920x1080 screen resolution, then the text will jump into the other div…
I’ll try what you stated about wrapping the text in a div as well and report on results.
Thanks.
Took some screenshots to help.
This is what happens when I leave the ‘width’ on auto:
*The 2nd thumbnail will be pushed up…
This is fixed when I use ‘vw’ measurements, unsure if this is safe with the code:
But, when I go full screen on my monitor, which is 2560x1440, the ‘vw’ text will overlap into the other thumbnails space, like this:
It’s fine when scaling down the ‘media query’, but at large resolution, literally just this little jump… it does this.
Hope that helps in what’s happening.
Ok, I found a fix, unsure if this’ll help anyone in the future…
But I set the ‘div’ that was holding the ‘thumbnail & text’ items to 49%.
It was originally %50 inside of a div that is scaling %50. This seems to have fixed it!
Thank you Vincent for your help!
Nevermind… Broken again… I think I’m just going to remove it and see if when I get a backend guy if they can help make a cleaner way to do this…
Thanks!
Is there a native/simpler way to do this in the Webflow designer now? Would love to be able to truncate blog post summaries with an ellipsis if possible.
Step 1. In your site-wide custom code Header section, add .truncate { white-space: nowrap; text-overflow: ellipsis; } inside style tags.
Step 2. Add tag ‘truncate’ to your text element:
Step 3. Set Overflow hidden on your text element:
Step 4. Set a specific px height of your choosing for your textbox that correlates to the number of lines you wish to display before the ellipses appears
Thank you!!!
astha parmar
Principal & Founder @ inspri.co
Helping purpose-driven organizations create innovative people practices.
astha@inspri.co | Connect on LinkedIn or****Twitter
I tried this to force the ellipsis into to a two line wrap but didn’t work:
.truncate { white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis; }
