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;