CSS: An indented element with hidden overflow that doesn't disable it?

Question

I would like to know how to create an element with a hanging indentation along with a hidden overflow that does not hide the specified indentation.

This demonstrates my problem: http://jsfiddle.net/Skofo/qgd2p/

Thanks!

Answer 1

Based on your scripts, replace margin-left: 15px; on padding-left: 15px; on li elements.

I just tested it in chrome, mind. Perhaps you need to set box-sizing to something compatible to make a cross-browser work, for example box-sizing: border-box;

Answer 2

See this script: http://jsfiddle.net/saSna/

Is this the result you want to achieve?

I added the addition of 15px to li and removed :first-child , so both ul have the same styles:

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