Question

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

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

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

我尝试将<p>标签放在带有CSS的文本周围，它能够正确省略，但问题是下划线，锚标签看起来像是由2件组成我不想要 http://jsfiddle.net/Vc4N6/3/

在javascript中有更好的方法吗？所以我不必为CSS而烦恼（不同的浏览器IE8和9必须在其他浏览器上使用。）

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

修改

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

理想情况下应该看起来像

这是一篇非常冗长的文字冗长的文字.. - 2014年5月7日 - 订单 ID＃12345
简短文字 - 2015年6月6日 - 订单编号＃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

如果我的问题是正确的，您可以使用display: inline-block，vertical-align: middle，white-space: nowrap和其他一些css道具，在没有javascript的情况下执行此操作。 DEMO

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

2 个答案: