Insert ellipsis to the partial text inside the anchor tag

Question

<a href="#" >some lengthy text -- 07 May 2014 -- order ID#12345 </a>

I have an anchor tag inside that I have some text,date, number(text -- date -- number format) like as shown above I want to ellipsis only the text according to the out div in such a way that whole anchor content(text,number,date) should not wrap to new line.

In the above example I want to ellipsis only text(some lengthy text) It should not disturb the number and date

I tried putting <p> tag around text with some CSS it is able to ellipsis properly but the issue is underline for anchor tag looks like made up of 2 piece I don't want that http://jsfiddle.net/Vc4N6/3/

Is there a better way of doing this in javascript ? so that I don't have to struggle with CSS(with different browser IE8&9 is must along other browser. )

NOTE: I don't use jQuery solution should be in pure javascript

EDIT:

I got solution for above question but my requirement is bit more I will be using these line item in list, after adding to list it is introducing space between text and date if I have varying text in each line item.see here http://jsfiddle.net/Vc4N6/13/

Ideally It should look like

• this is very lengthy text lengthy text.. -- 07 May 2014 -- order ID#12345
• short text -- 06 Jun 2015 -- order ID#46453

Answer 1

It's ellipsis by the way, not ellipse.

http://jsfiddle.net/Vc4N6/12/

.e {
    overflow: hidden;
    max-width:70px;
    text-overflow: ellipsis;
    white-space:nowrap;
    display: inline-block;
    margin: 0;
    vertical-align: top;
}

Answer 2

If I get the question right, you can do it without javascript using display: inline-block, vertical-align: middle, white-space: nowrap and few other css props. DEMO