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

我正在尝试创建具有以下功能的指令:

当换行时(在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>'

但是，如您所见，宽度是硬编码的。
我的问题是如何使它动态地达到父级宽度。

最佳答案

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

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

关于html - Angular -换行时的工具提示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36165699/