Angular - tooltip when line breaks

I am trying to create a directive with the following functionalty:

when the line breaks (no more place in the div) a tooltip will be created (with the full text) and the text will get cut and replaced by 3 dots.

everything i found so far is for multi line, the best i got is this:

css:

.trim-info {
    max-width: 50px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 15px;
    position: relative;
}

template:

'<div class="trim-info" uib-tooltip="{{lineCtrl.text}}">{{lineCtrl.text}}</div>'

But, as you can see the width is hardcoded. My question is how can I make it dynamcily to the parent width.