角UIB-酥料餅的顯示器時設置溢出文本

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

<span>是inline元素和width的inline元素取決於其內容。如果你將添加更多的內容，其寬度將增加，反之亦然。

在上述情況下，即使沒有空格，也會有很長的字符串。如果您要檢查您的<span>，您將會看到<span>的遠大於其母公司.test-container的width。

uib-popover正在根據<span>的width。如果您將增加或減少<span>元素的內容，您也會看到uib-popover的位置變化。

您可以通過製作<span> a 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>