gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:14:53 29 4
gpt4 key购买 nike

我在这里有一个我的问题的工作示例: 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 上,但我更希望弹出框位于跨度的中心。

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

最佳答案

<span>是一个 inline元素和 widthinline元素取决于它的内容。如果您要添加更多内容,其宽度将增加,反之亦然。

在上述情况下,即使没有空格,您的文本也很长。如果您要检查您的 <span>你会看到 width<span>width 大得多其父.test-container .

uib-popover正在根据 width 采取其立场的 <span> .如果您将增加或减少 <span> 的内容元素你会看到 uib-popover 位置的变化

您可以通过制作 <span> 来解决这个问题一个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>

关于javascript - 当在溢出的文本上设置时,Angular uib-popover 显示在错误的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34278228/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com