Text preview: how to insert '...' after long text
Learn how to effectively manage long blocks of text in your Bubble.io project, ensuring they maintain a set height and display only a designated number of lines - all without writing a single line of code.
Tame long text: Learn how to control lengthy content in your Bubble app with this quick tutorial.
Master text overflow: Discover the simple trick to add ellipsis and manage text height in Bubble's fixed layout pages.
Elevate your Bubble UI: Transform how you handle large blocks of text and create more polished, professional-looking apps.
Dealing with Long Text in Bubble
Thanks to everyone who leaves comments on our videos because this is a quick one from a question we received in the comments which is basically about dealing with really long bits of text. Now this is a bit of static text and just the text elements but imagine this is data you know you're saying current users, bio for example and the bio you've got like a multi-lay input and the bio field contains a large amount of text here's just some dummy text and if we go ahead and preview this we get all of the text returns on the page but what if there were other elements in the page surrounding it and we wanted to ensure that this would only be certain height.
Setting Up the Page Layout
So right now I've been a bit sloppy this is in a fixed layout page so let's put first of all put in a column and then let's make the width 100% so I only want it to be two lines well it's as simple as changing the height value to the appropriate height based on your font size so there you go 40 is the perfect height for just two lines of content and we'll refresh the page there you go we automatically get the three dots added in at the end signifying to us and our users that there is more text.
Additional Features for Text Display
Now you could use like a tool tip here to show more text you could make this suck a link through to a pop-up to show them more text but yeah basically it's dead easy dead simple to to show that there is more text and to make your text element not so big on the page and take up less space and if you're learning Bubble and you want to see more videos like this then click the link down in the description.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
3 ways we support solopreneurs
Our team is here to help, with a combined 30+ years working for internet startips.
Learn Bubble
Explore our library of 300+ Bubble and no code tutorial videos. Watched by over 800k no coders on YouTube.
Bubble Coaching
Troubleshoot your Bubble app and build new no code features with our in house Bubble expert.
Mastery
Ready to take your SaaS idea to the next level? Join our exclusive Mastery program for personalised content & mentoring.