html - CSS：一个带有悬挂缩进和隐藏溢出的元素，不会切断它？

Question

我想知道如何制作一个带有悬挂缩进的元素，以及一个不隐藏所述缩进的隐藏溢出。

这说明了我的问题：http: //jsfiddle.net/Skofo/qgd2p/

谢谢！

Answer 1

请看这个小提琴：http: //jsfiddle.net/saSna/

这是你想要达到的结果吗？

我已将 15px 填充添加到li，然后将其删除:first-child，因此两者ul具有相同的样式：

ul li {
    width:120px;
    text-indent:-15px;
    margin-left:15px;
    margin-bottom:10px;
    padding-left:15px;
}

ul li {
    overflow:hidden;
    text-overflow:ellipsis;
}

Answer 2

根据您的小提琴，在您的元素上交换margin-left: 15px;for 。padding-left: 15px;li

请注意，我只在 chrome 中检查过这个。您可能必须设置box-sizing一些一致的东西才能使其跨浏览器工作，例如box-sizing: border-box;