Menu
I'm currently using ellipsis to truncate an order list's items which are more than one line long. However, the li's that are too long and require an ellipsis automatically have the number on the left removed. Is there a way to prevent this from happening?
Without the css, the list-items have numbers.
<style> #test li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> <ol id="test" style="width:100px;"> <li>test1</li> <li>test1</li> <li>toooooooooooooooooo loooooooooooooooooonnnnnnnnnnnnnnggggggg</li> <li>test1</li> <li>test1</li> <li>test1</li> </ol> 
339
text-overflow: ellipsis only works when the following is true: Parent element is not set to display: inline (span's default,) You must use display: block or display: inline-block. The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('…', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (' … '), or display a custom string.
List style Position defaults to Outside. Change to inside and the numbers should appear.
<style> #test li { list-style-position:inside; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
