我有一个关于我的问题的工作示例:
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;
}
我知道我可以将popover放在测试容器div上,但我更喜欢将popover放在span的中心.
有没有人知道如何解决这个问题?
最佳答案 <跨度>是内联元素,内联元素的宽度取决于其内容.如果您要添加更多内容,其宽度将增加,反之亦然.
在上面的情况下,你有很长的文本字符串,即使没有空格.如果你要检查你的< span>你会看到< span>的宽度远远大于其父.test-container的宽度.
uib-popover根据< span>的宽度取得其位置.如果您要增加或减少< span>的内容你也会看到uib-popover位置的变化.
你可以通过制作< span>来解决这个问题.块元素和移动文本剪切属性.
(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>