0

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

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

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

我尝试<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
4

2 回答 2

2

顺便说一下，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;
}
于 2014-05-07T17:47:52.177 回答
1

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

于 2014-05-07T17:50:26.170 回答