Emberjs - interact with view after it has completely loaded

I'm building an Emberjs app, and I have an HTML element that contains text which often overflows the element, so I want to truncate the text and append an ellipses.

Here's my HTML element and CSS:

<div class="elementClass">{{textValue}}</div>

.elementClass {
     height: 100px;
}

Here's the JavaScript function I'm using to trim the last three characters of the text until the scrollHeight is no longer greater than the height:

function truncateElementText($element) {
    var html = $element.html();

    if ($element.height() < $element.prop('scrollHeight')) {
         $element.html(html.substring(html.length - 3, html.length) + '&hellip;');
         truncateElementText($element);
    }
}

Here's the Emberjs view I'm using to call truncateElementText on the element that I want to trim:

App.MyView = Ember.View.extend({
    didInsertElement: function () {
         Ember.run.scheduleOnce('afterRender', this, function() {
               var $element = $('.elementClass');
               truncateElementText($element);
         });
    }  
});

The problem is, truncateElementText seems to be executing before it has access to the $element. It doesn't trim $element the first time the page loads, but it will trim $element if I refresh the browser. If I do console.log($element.html()) at the beginning of didInsertElement, I can see that it has the element and its HTML at that point, so it's not like $element isn't available in the DOM when I select it and pass it to the function.

If I use setTimeout to delay truncateElementText by 50 milliseconds, it works every time, even the first time the page is loaded.

I'm new to Ember, so any and all advice would be greatly appreciated.

Thanks!