角度 - 换行时的工具提示

Question

我正在尝试使用以下功能创建一个指令:

当换行符(div中没有​​其他位置)时,将创建一个工具提示(带有全文),文本将被剪切并替换为3个点.

到目前为止我找到的所有东西都是多线的,我得到的最好的是:

CSS:

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

模板:

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

但是,你可以看到宽度是硬编码的.我的问题是如何使其动态地扩展到父宽度.

Answer 1

在CSS中你可以做到

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    min-width: 0;
}

在您的指令中,您可以检查

angular.module('myApp').directive('tooltip', function() {
    function isEllipsisActive(e) {
         return (e.offsetWidth < e.scrollWidth);
    }
    return {
        restrict: 'E',
        link: function(scope, el, attr) { 
          var addTooltip = isEllipsisActive(el);
        }
    };
}

然后根据此值启用工具提示.