javascript - 在 anchor 标签内的部分文本中插入省略号

Question

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

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

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

我尝试用一​​些 CSS 在文本周围放置 <p> 标签，它能够正确地省略但问题是 anchor 标签的下划线看起来像是由 2 部分组成我不想要那个 http://jsfiddle.net/Vc4N6/3/

在 javascript 中有更好的方法吗？这样我就不必为 CSS 而苦恼(必须使用不同的浏览器 IE8 和 9 以及其他浏览器。)

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

编辑:

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

理想情况下应该是这样的

• 这是非常冗长的文本 冗长的文本.. -- 2014 年 5 月 7 日 -- 订单 编号#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;
}