List display inline text text-overflow

Question

I'm trying to have a list of element displayed inline with a text-overflow : ellipsis . But after several attempt I cannot make the text-overflow working it still making a clip instead of ellipsis

ps : This div can be resized that explain the text-align : center

 div { position: relative; left: 100px; width: 175px; border: 1px solid black; text-align: center; white-space: nowrap; overflow : hidden; text-overflow : ellipsis; } ul{ margin: 0; padding: 0; } li { display: inline-block; background-color: silver; } 

 <div> <ul> <li>some text</li> <li>some text that will overflow</li> </ul> </div> 

https://jsfiddle.net/Crema/xg29zmz8/2/

Answer 1

The key here is to apply display:inline on the ul and li :

 div { position: relative; left: 100px; width: 150px; border: 1px solid black; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ul { display: inline; padding: 0; } li { display: inline; background-color: silver; } 

 <div> <ul> <li>some text</li> <li>some text that will overflow</li> </ul> </div> 

Answer 2

 div { position: relative; left: 100px; width: 150px; border: 1px solid black; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ul { display: inline; padding: 0; } li { display: inline; background-color: silver; } 

 <div> <ul> <li>some text</li> <li>some text that will overflow</li> </ul> </div>