javascript - 如何选择溢出省略号的开始位置

Question

我正在尝试创建一些论坛主题的 ListView ，其中包含帖子数量。目前我有一个静态示例 here .

这就是我触发省略号的方式:

ul {
    list-style: none;
    padding: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap; 
}

ul li {
    line-height: 3em;
    padding-left: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
}

和 HTML 结构:

<ul>
    <li>
        <span>21:26</span>
        <a>Klaagcorner</a>
        <span>
            <a>29703</a>
        </span>
    </li>
    <li>
       ...
    </li>
</ul>

如您所见，25.9K 跳转到下一行，因为标题太长了。有没有办法选择省略号必须从哪里开始？将 width: ##px 放在 a 标签上没有任何作用。将省略号放在另一个元素上时可能会起作用吗？

我尝试添加样式以触发元素上的省略号(因此 ul li 上不是 ul，也不是 ul li on ul li a)，但这似乎并没有达到目的。欢迎使用纯 CSS 和 JS/jQuery 解决方案!

现在的样子:

我想要的:

Answer 1

您将省略号放在整个 <li> 上而不仅仅是 <a>

将省略号代码移动到如下所示:

ul li {
    line-height: 3em;
    padding-left: 20px;
}

ul li > a{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    width: 200px;
    position: absolute;
    margin-left: 5px;
}

这是一个 updated fiddle