Limit the number of characters displayed in a text element according to responsiveness?

Questions
1

Is there a way to do this?

If the text is too long, I don’t want it to go to the next line. I want it to be strictly one line.

I tried the “cut off content if element is not tall enough” but the problem with this is it completely cuts off the whole text if the long text is a full word without spaces and it displays a blank space.

I tried truncating too but the problem with this is it has to be responsive, so it will vary on the users screen upto how many characters the text can be displayed.

What I basically want is one single line, and if the text is too long, it will cut to how much it can display, and then add a “…” at the end to indicate its not the full text.

Is there a way to do this?

2

Put a conditional on to the text element based on the current width of the page and then set the number of characters based on how many can be displayed at certain page widths

3

wouldn’t that be too tedious? Should I put a condition for every width size?

And I need this on most text elements so i’d have to add this conditions to each text elements everytime.

Wished there was a more efficient way to do it, this workaround is going to be troublesome. But if there’s no other option then there’s no choice.

4

You shouldn’t need it for every width size, because when designing for responsiveness you need page breaks ( preset widths when things change )…most sites use 3 or more page breaks

You can set your text element to have a style ( I am not 100% sure that the style copies the conditional for all elements, but I have experienced it occurring…play around and see )

You can also copy conditionals…right click and select copy conditional formatting…then click next element and paste conditional formatting…OR just copy and past the text element with the conditional on it already and use it every time you need a new text element

By the way “tedious”…hahaha…welcome to developing an app…I spent three days figuring out and putting together a image uploader that functions as I want

5

Hello Abhi.
To limit the number of characters displayed according to the element width you chould:

1 Like
6

You could also try to use responsive fonts, setting the font size depending on the screen width, using css and media queries or variables.

For some examples, search for “responsive fonts” on codepen.io