文本溢出：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/

超文本标记语言

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