CSS：具有悬挂缩进和隐藏溢出的元素，不会将其剪掉？

Question

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

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

谢谢！

Answer 1

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

我只用chrome检查过这个。您可能必须将box-sizing设置为一致的内容才能使其跨浏览器工作，例如box-sizing: border-box;

Answer 2

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

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

我已向li添加了15px填充，并删除了: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;
}