Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Text preview: how to insert '...' after long text

Learn how to effectively manage long blocks of text in your project, ensuring they maintain a set height and display only a designated number of lines - all without writing a single line of code.

Dealing with Really Long Bits of Text

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 a text element, but imagine this is data, you know, you're saying current users bio, for example. And the bio, you've got like a multi line input and the bio field contains a large mouth text. Here's just some dummy text. And if we go ahead and preview this, we get all of the text returned on the page.

Ensuring a Certain Height for Text

But what if there were other elements in the page surrounding it? And we wanted to ensure that this would only be certain height. So right now I've been a bit sloppy. This is in a fixed layout page. So let's first of all put it 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. Now you could use like a tooltip here to show more text. You could make this like a link through to a pop up to show them more text. But yeah, basically it's dead easy, dead simple to show that there is more text and to make your text element not so big on the page and take up less space.

Latest videos