javascript - 如何将标签转换为 "..."

Question

我有一个链接列表。

分别跟随他们会显示。当文本很大时。连接成两行都是。

我不想要文字换行。

喜欢:

<a href="javascript:void(0)" > Link within two lines </a>

Link within
two lines

转换为:

<a href="javascript:void(0)" > Link within two lines </a>

Link within ...

这可能吗？

我不知道

Answer 1

您在这里描述的是 text-overflow:ellipsis; overflow 属性。

现在，无论何时换行，都意味着文本不再适合第一行。然而，我们不想要第二行，所以我们使用white-space: nowrap;。

我们使用 overflow: hidden; 来确定溢出，我们使用 block 显示，因此我们可以为 anchor 提供自定义宽度。 display: inline-block; 在这种情况下，因为我希望它必须与内容相关。在我们给出自定义宽度的地方，当我们溢出时width: 90px;。
所以我们得到:

a 
{
    width: 90px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

90px 内的文本没有 [...] 标签。

jsFiddle