在锚标记内的部分文本中插入省略号

Question

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

我有一个锚标记，里面有一些文本，日期，数字(文本-日期-数字格式)，如上面所示，我想根据outdiv只省略文本，这样整个锚内容(文本，数字，日期)不应该换行。

在上面的例子中，我只想省略文本(一些冗长的文本)，它不应该干扰数字和日期

我试着把<p>标签周围的文本与一些CSS，它能够正确省略号，但问题是锚标记下划线看起来像由2块我不想要的http://jsfiddle.net/Vc4N6/3/

在javascript中有更好的方法吗?这样我就不必纠结于CSS了(与不同的浏览器IE8&9是必须沿着其他浏览器)。

注意:我不使用jQuery解决方案应该在纯javascript

编辑:

我得到了上述问题的解决方案，但我的要求更多，我将在列表中使用这些行项目，添加到列表后，如果我在每个行项目中有不同的文本，它将在文本和日期之间引入空格。请看这里http://jsfiddle.net/Vc4N6/13/

理想情况下它应该看起来像

• 这是一个很长的文本。——2014年5月7日——订单ID # 12345
• 短文本—2015年6月6日—订单ID # 46453

Answer 1

顺便说一下，是ellipsis，不是椭圆。

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

如果我得到的问题是正确的，你可以做到没有javascript使用display: inline-block, vertical-align: middle, white-space: nowrap和其他一些css道具。演示