Feature Request: Truncate labels with ellipsis

Axure RP 9
1

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.

3 Likes
2

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.

3

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.

1 Like
4

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)

1 Like
5

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 :wink:

6

Best thing to do is send an email to support@axure.com with your suggestion.

7

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.)

5 Likes
8

Awesome work. Thank you very much.

9

@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?

10

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.

1 Like