Very often in repeaters and other cases I am missing the ability to truncate text. There are workarounds like truncating the demo data but sometimes I need two columns for a short data and a long data as the full text is also required for other interactions.
But an implementation would be easy. Just add the CSS property text-overflow:ellipsis to a label if a new truncate option of a text label is set and the label could be simply cut off at the predefined size.
You can do this manually using the string.substr function. However, you do need to cut it at a standard character length. A checkbox would be easier, I agree.
Yes I know, but the string.substr. is not working well for variable width fonts and it is just a bad workaround. Also I need to demonstrate the ellipsis to the developers, so I also need to extend the function to also add the ellipsis.
So you can fake this using substr.
So, for example if you had a repeater column for user name, you could have something like:
[[Item.Username.substr(0,10]]âŚ
which would show the first 10 characters of the username and then the ellipsis. However, this would show an ellipsis regardless.
Optionally, you could place the set text action on the text widget itself, then move the widget by 0,0 at load and use cases on the âMovedâ interaction to check the length of the string, only using the ellipsis where the username value was over 10 characters.
Demo file below
TruncationDemo.rp (50.2 KB)
Thank you. That looks pretty nice and simple. But as you said. It works good if you always have to truncate the text. It works not so well, when it only needs to be truncated sometimes.
And then the move workaround will work, but just raises my wish for the simple checkbox in Axure even more 
Hi!
I agree that this should simply be the property of a widget.
However, you can do this with some javascript. You can add javascript to the external URL field of the Open Link in Current Window command.
This code will truncate the text of a widget to the widgetâs current width, assuming the widget is called âmyLabelâ. If itâs called something else, just change the first line of code.
javascript:
{
const labelName = 'myLabel1';
const label = $(`[data-label="${labelName}"]`);
const p = label.find('p');
p.css({'overflow':'hidden','white-space':'nowrap','text-overflow':'ellipsis'});
label.css('height', p.height());
label.find('div').css('height', p.height());
$axure(`@${labelName}`).resize({width: p.width(), height: p.height()}, {});
void(0);
}
IMPORTANT: if you are on a Mac and you edit this, make sure smart quotes are not on. System Settings > Keyboard > Text > uncheck use smart quotes
Also, note that this code will act upon every widget on the page named âmyLabelâ.
Sample file: truncate-with-ellipsis.rp (47.7 KB)
[Edit]
I should have pointed out that any further set text command on a widget that has already had the CSS applied will end up truncated. I also improved the script so that resizing the field after applying the CSS doesnât break the page. (both the css above and the sample file have been updated.)
@josephxbrick Where did you learn how to write this? Would you help with pointing to any documentation of how to use JavaScript to interface with Axure?
Sorry, just now seeing this question.
The best way is to inspect the HTML that Axure creates and use JQuery or AxQuery to get information from it or to modify it. (AxQuery is documented unofficially here.) Iâm using the AxQuery resize method to resize the label.
Otherwise, itâs all JQuery above, along with a lot of googling to find the appropriate ways in javascript/JQuery to do what Iâm trying to do.
You should google JQuery selectors, which allow you to get a reference to basically anything at any level in the HTML. Such selectors start with a dollar sign, and the one above is using the attribute selector find all elements whose âdata-labelâ selector is equal to the widget name. Axureâs HTML uses that attribute to store the name of the widget, which is always wrapped by a div.