I have a text element whose text I change in front-end code. When the new text is longer than the horizontal size of the element, the element magically grows vertically, adding a new line, pushing down the elements below it. I don’t want this to happen—I’d rather the text were cut off, showing only what fits in the first line.
The easiest solution would be a setting on text elements to say “don’t expand by adding lines”. Does this exist somewhere? Next best, I guess, would be a way to tell programmatically if the element had added a line, in which case I could shorten the new text until this doesn’t happen. Or maybe some way of measuring arbitrary text (in the face of variable-width fonts etc.) to see what fits and what doesn’t.
Any ideas appreciated.
What I would do in your situation is just setting a limit for this text field.
there is function for “string” input called .substr(startPosition, endPosition),
than you can check is the length for this line (based on his width and font-size).
Than before setting the text you can simply say :
$w("#text").text = yourText.substr(0,LINE_LENGTH);
Let me know if you need more help
Hi Lary 
You cannot set a maximum height on the text element, but as a workaround, you can subtract the text element so that it fits the intended space, without growing further.
On the editor, set the maximum height of a text element to your desired height, fill it with text, then count how many characters it is, save that number since we’ll use it down below.
let targetNumber; // The maximum number of characters
Now we’ll check if the returned text is shorter than the target number
let text = $w('#textElement').text;
if (text.length > targetNumber) {
text = `${text.substr(0, targetNumber)}..`;
}
You can also use a “Text & Icon Button” which will turn text from “Example Example” to “Exam…” when the text reaches the maximum width.
Hope this helps~!
Ahmad
Please see my reply to Ahmad below, so that I don’t have to repeat myself.
Hello, Ahmad (and orhirschhorn14) and thanks for your replies. Unfortunately, your idea is not an optimal solution.
The problem is that virtually all fonts these days are variable-width, meaning that different characters occupy different amounts of horizontal space. The actual text element on my page is an example. If I fill it with capital W, for example, it holds 8 characters: “WWWWWWWW”. But if I fill it with lowercase i, it holds 35 characters: “iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii”. You can probably see something of the sort happening here in this reply: eight Ws consume about the same amount of horizontal space as 35 i’s.
So no fixed number of characters can be used as a measure of the length of a visual line; “number of characters” doesn’t translate to width. Of course I could use some sort of average, but then it would still overflow sometimes and other times it would be cut off when it didn’t have to be.
If I could measure the width of each character in the proposed text I could see when the line overflows. But I don’t believe there’s a function available that takes a character, a font, a fontsize, and a style (e.g. bold, italic) and gives back the correct horizontal measure. That’s why I was hoping that the text element itself could be kept from overflowing, or at lease could tell me “Oops! I’ve overflowed onto two lines!” so I could take corrective action.
So thanks again. Any other ideas greatly appreciated.
@larry80875 I did mention that my suggestion was a workaround, not a solution, if you have to have one line, then your only solution is to use the " Text & Icon Button " as I suggested instead of the text element, it’s the only element and way you can achieve one line without overflowing or extending the width.