Javascript 在定位标记内的部分文本中插入省略号

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

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

我试着用一些CSS在文本周围放置

标记，它能够正确地省略，但问题是下划线，因为锚定标记看起来像是由两块组成的，我不希望这样

在javascript中有更好的实现方法吗？这样我就不必与CSS打交道（使用不同的浏览器，IE8和IE9必须与其他浏览器一起使用）

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

编辑：

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

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

• 这是一篇很长的文章2014年5月7日——命令 身份证号码#12345
• 短文本——2015年6月6日——订单 身份证号码#46453

---

顺便说一句，这是

省略号，不是椭圆


顺便说一下，这是省略号，不是椭圆


如果我答对了问题，您可以使用
display:inline block
、
vertical align:middle
、
white space:nowrap
和其他一些css道具，而不用javascript。
如果我答对了问题，您可以使用
display:inline block
，
垂直对齐：middle
，
空白：nowrap
和其他一些css道具在不使用javascript的情况下完成。
非常感谢您的回答，但我的要求更高。请参阅演示（）但第二行中间有空格。是否可以解决此问题？是的，请使用
最大宽度
而不是
宽度
。我更新了我的答案。你能在你的帖子中展示一个最简单的例子吗？目前，如果没有外部链接，您的代码就没有意义，这真的不是一件好事。我非常感谢您的回答，但我的要求更高。请参阅演示（）但第二行中间有空格。是否可以解决此问题？是的，请使用
最大宽度
而不是
宽度
。我更新了我的答案。你能在你的帖子中展示一个最简单的例子吗？目前，如果没有外部链接，你的代码就没有意义，这真的不是一件好事。你能帮我解决更多问题吗，请看更新的代码。你能帮我删除额外的空间吗？这是因为我在某些行项目中有长文本，而在其他行项目中有短文本，在较短的文本之后，它引入了空格。要做到这一点，只需将
.e
上的宽度减小到您需要的程度。例如，
.E{width:50px；}
你能帮我解决更多问题吗，请看更新的代码。你能帮我删除额外的空间吗？这是因为我在某些行项目中有长文本，而在其他行项目中有短文本，在短文本之后，它会引入空间。要做到这一点，只需将
.E
上的宽度减小到你需要的程度。例如
.E{宽度：50px；}
.e {
    overflow: hidden;
    max-width:70px;
    text-overflow: ellipsis;
    white-space:nowrap;
    display: inline-block;
    margin: 0;
    vertical-align: top;
}