javascript - 使用 HTML/JS/CSS 缩短链接

Question

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

我们有一些名称很长的产品，我想缩短它们，并可能在末尾添加 (...) 或类似的东西。

所以像这样的东西应该看起来像abcdefg...而不是abcdefghijklmnopqrstuvwxyz

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

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

欢迎使用 JS 解决方案。

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

标签： javascripthtmlcss

Answer 1

与&white-space结合使用。并且不要忘记添加到元素，以便您可以应用它。overflowtext-overflowdisplay: inline-blockawidth

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

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