Angular 设置溢出文本时 uib-popover 显示在错误的位置

Question

我这里有一个我的问题的工作示例： http://plnkr.co/edit/vwZS5e?p=preview

问题范围如下：

<div class="test-container">
    <span uib-popover="Test"
          popover-placement="top"
          popover-trigger="mouseenter"
          popover-append-to-body="true">
        MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe
    </span>
</div>

当我将鼠标悬停在该范围的中心上方时，我试图在该范围的中心上方显示一个弹出窗口。当文本太长时，我正在使用文本溢出来切断我的文本。但似乎 uib-popover 没有考虑溢出问题。弹出窗口看起来太靠右了。

这是我的 css:

.test-container {
    text-overflow:ellipsis; 
    overflow:hidden; 
    width:100px; 
    border:1px solid red; 
    margin-top:50px; 
    margin-left:50px;
}

我知道我可以将弹出窗口放在测试容器上 div，但我希望弹出窗口位于跨度的中心。

有人知道如何解决这个问题吗？

Answer 1

 是一个 inline 元素，inline 元素的 width 取决于它的内容。如果您将添加更多内容，其宽度将增加，反之亦然。

在上述情况下，即使没有空格，您的文本也很长。如果您检查 ，您会发现  的 width 比其父级 .test-container 的 width 大得多。

uib-popover根据的width取其位置。如果您要增加或减少  元素的内容，您也会看到 uib-popover 的位置发生变化。

您可以通过将  设为 block 元素并在其上移动文本剪辑属性来解决此问题。

(function(){
  'use strict';

  angular
    .module('app', ['ui.bootstrap', 'ngAnimate']);
})();

(function(){
  'use strict';

  angular
    .module('app')
    .controller('appController', AppController);

  AppController.$inject = ['$log', '$timeout'];

  function AppController($log, $timeout) {
    var vm = this;

    return vm;
  }
})();

html,
body {
  background-color:darkgray;
}

.test-container {
  width:100px; 
  border:1px solid red; 
  margin-top:50px; 
  margin-left:50px;
}

.test-container span {
  text-overflow:ellipsis; 
  overflow:hidden;
  display: block;
}

<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>

<div ng-app="app" data-ng-controller="appController as vm">
  <div class="test-container">
    <span uib-popover="Test"
          popover-placement="top"
          popover-trigger="mouseenter"
          popover-append-to-body="true">
      MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe
    </span>
  </div>
</div>

Angular 设置溢出文本时 uib-popover 显示在错误的位置

Angular uib-popover displays in wrong position when set on overflowed text

javascript

css

twitter-bootstrap

angularjs

angular-ui-bootstrap