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

我知道我可以将popover放在test-container div上，但我更喜欢将popover放在span的中心。

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

Answer 1

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

在上述情况下，即使没有空格，也有很长的文本字符串。如果您要检查，则会看到width的{{1}}比其父的{{1}}大得多。

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

您可以通过使成为元素并在其上移动文字剪辑属性来解决此问题。

＆＃13;

uib-popover

＆＃13;

<span>

＆＃13;

block

＆＃13;

在溢出文本

1 个答案: