角度 - 换行时的工具提示

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

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

Answer 2

这是一个非常简单的方法来使用一些jQuery。 造型取决于你：）

＆＃13;

＆＃13;

$('.tooltip-bottom').each(function() {
  var after = $(this).clone();
  after.removeClass('tooltip-bottom')
       .removeClass('small')
       .addClass('tooltip')
       .css({"position": "absolute",
             "top": ($(this).position().top + $(this).height() ) + "px",
             "left": $(this).position().left + "px"});
  
  $('.MyContainer').append(after);
});

＆＃13;

.small {
  width: 50px;
  height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tooltip {
  display: none;
  transition: all 0.5s;
}
.small:hover ~ .tooltip {
  display: block;
  overflow-x: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyContainer">
  <div class="small tooltip-bottom">this is a very small div</div>
</div>

＆＃13;

＆＃13;

＆＃13;