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

使用绝对定位。标记的一些小改动。

以下是 FIDDLE： 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;
}

text-overflow：li中的省略号，不使用overflow：hidden

1 个答案: