使用HTML / JS / CSS缩短链接

Question

我正在尝试更改网站上导航的设计。

我们有些产品的名称很长，我想把它们简称，也许在末尾加（...）或类似的名称。

所以，这样的事情应该是这样abcdefg...，而不是abcdefghijklmnopqrstuvwxyz

a{
  width:50px;
  overflow:hidden;
}

<a href="#">abcdefghijklmnopqrstuvwxyz</a>

欢迎使用JS解决方案。

我也想知道为什么未应用宽度？

Answer 1

使用white-space结合overflow和text-overflow。并且不要忘了添加display: inline-block到a元素，因此您可以应用width它。

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

<a href="#">abcdefghijklmnopqrstuvwxyz</a>