html - Angular - 换行时的工具提示

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);
        }
    };
}

然后根据这个值启用工具提示。