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

【问题标题】：Insert ellipsis to the partial text inside the anchor tag在锚标记内的部分文本中插入省略号
【发布时间】：2014-06-24 19:36:07
【问题描述】：

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

我有一个锚标签，里面有一些文本，日期，数字（文本 - 日期 - 数字格式），如上所示，我想根据 out div 仅省略文本，这样整个锚内容（文本、数字、日期）不应换行。

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

我尝试使用一些 CSS 将 <p> 标记放在文本周围，它能够正确省略，但问题是锚标记的下划线看起来像是由两部分组成的，我不希望这样 http://jsfiddle.net/Vc4N6/3/

在 javascript 中有更好的方法吗？这样我就不必为 CSS 而苦恼了（使用不同的浏览器 IE8&9 必须与其他浏览器一起使用。）

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

编辑：

我得到了上述问题的解决方案，但我的要求更多，我将在列表中使用这些行项目，添加到列表后，如果我在每个行项目中有不同的文本，它会在文本和日期之间引入空格。见这里@ 987654322@

理想情况下应该是这样的

this is very long text long text.. -- 2014 年 5 月 7 日 -- 订购 ID#12345
短文本 -- 2015 年 6 月 6 日 -- 订购 ID#46453

【问题讨论】：

标签： javascript html css ellipsis elasticlayout

【解决方案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;
}

【讨论】：

非常感谢您的回答，但我的要求有点多。请参阅演示（jsfiddle.net/Vc4N6/13），但第二行之间有空格是否可以解决此问题？
是的，使用max-width 而不是width。我更新了我的答案。
您能否展示一个在您的帖子中具有此功能的最小示例？就目前而言，如果不遵循外部链接，您的代码就没有意义，这真的不是一件好事。

【解决方案2】：

如果我的问题是正确的，你可以在没有 javascript 的情况下使用 display: inline-block、vertical-align: middle、white-space: nowrap 和其他一些 css 道具来完成。 DEMO

【讨论】：

能否请您再帮我一些忙，请参阅更新后的代码jsfiddle.net/Vc4N6/14 请您帮我删除多余的空格，因为我在某些行项目中有冗长的文本，而在其他项目中有简短的文本，在较短的文本之后，它引入了空格。
要做到这一点，只需将.e 的宽度减小到您需要的程度。例如。 .e { width: 50px; }