How to show ellipsis through css in this html markup

Not sure why you showed us how you styled the lis but…

<style> li > span:nth-child(2):before { content: '\2026\0020'; } </style> <li> <span>Some text</span> <span>Some large amount of text</span> </li> 

In Unicode, U+2026 is the horizontal ellipsis and U+0020 is the space.

Demo: http://jsfiddle.net/5xWhx/

Assuming your structure is always like you've marked up (if not, you can use classes - probably a better approach anyway), you can use the nth-child selector and :after (or ::after) pseudo-elements, you can do it like this:

<ul> <li> <div> <span>Some text</span> <span>Some large amount of text</span> </div> </li> </ul> 

CSS:

/* Hide the text in the second span */ li span:nth-child(2){ display:block; overflow:hidden; text-indent:100%; white-space:nowrap; } /* Create a pseudo-element after the first span with an ellipsis (UTF-8) as its content */ li span:nth-child(1):after{ content:" \2026"; } 

jsFiddle Example

All you need is this if you have only one liner span. No pseudo elements required

li span:nth-child(2) { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 

According to caniuse.com all browser support this.

Try this plugin -

http://plugins.jquery.com/ellipsis/

$('#target').ellipsis({ row: 2, char: '**' }); 

You can also try this way (not fully supported)

span{ /* essential */ text-overflow: ellipsis; width: 200px; white-space: nowrap; overflow: hidden; /* for good looks */ padding: 10px; } 

I'm not sure if from your example wether you need a dynamic solution of not. So a few questions for you

• Do you know for sure that there will always be more text than the
  container can show?
• Is this text in second span shown only on one line or multiple lines?

I ask this because the text-overflow:ellipsis; only works on single line and then only in combination with white-space:nowrap;