css - 文本溢出：li 中的省略号不使用溢出：隐藏

Question

我有<li>标签，其中包含一些长度未知的文本（可由用户更改）。所以我试图设置省略号，<li>但没有运气。我无法设置overflow: hidden，因为我在其中制作了自定义工具提示，<li>所以如果overflow: hidden设置了，我的工具提示不可见。这是我尝试过的：

<ul>
<li class="title">Some very long text</li>
<li> ... </li>
</ul>

ul {
    list-style: none;
    min-width: 50px;
    width: 100px;
    margin: auto;
    display: inline-table;
    margin-right: 5px;
}

.title {
    height: 25px;
    line-height: 25px;
    text-align: center;
    width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;  
}

Answer 1

使用绝对定位。对您的标记进行一些小的更改。

这是小提琴：http : //jsfiddle.net/n9G7y/

HTML

<ul>
    <li>
        <span class="title">Some very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text</span>

        <span class="tip">tip for this item extends beyond end of ellipsis</span>

    </li>
    <li></li>
</ul>

CSS

 ul {
    list-style: none;
    min-width: 50px;
    width: 100px;
    margin: auto;
    display: inline-table;
    margin-right: 5px;
    overflow: visible;
}
li {
    position: relative;
}
.title {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    text-align: center;
    width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.tip {
    display: none;
}

li:hover .tip {
    display: block;
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    width: 300px;
}