如何将标签转换为“......”

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;溢出属性。

现在，无论何时生成新行，都意味着文本不再适合第一行。但是我们不需要第二行，因此我们使用white-space: nowrap;。

为了确定溢出，我们使用overflow: hidden;我们使用块显示，这样我们就可以为锚点提供自定义宽度。 display: inline-block;在这种情况下，因为我希望它与内容有关。当我们溢出width: 90px;时，我们给出自定义宽度的位置。
所以我们得到：

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

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

jsFiddle

Answer 2

你需要一个块元素和一个宽度，这样你就可以溢出。

<a href="javascript:void(0)" 
style="display:block; width:30px;text-overflow:ellipsis"> Link within two lines </a>