使用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>

Answer 2

默认情况下，锚点是嵌入式元素，并且忽略在锚点上设置的任何宽度。将显示更改为inline-block：

a {
  width: 50px;
  overflow: hidden;
  display: inline-block;
}

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

作为MDN states：

  

内联元素是仅占据由元素限制的空间的元素   定义元素的标签，而不是破坏   内容。

和...

  

您可以使用CSS更改元素的外观   显示属性。例如，通过更改显示的值   从“内联”到“阻止”，您可以告诉浏览器渲染内联   块框而不是嵌入式框中的元素，反之亦然。   专家，这样做不会更改类别和内容模型   的元素。例如，即使显示span元素   更改为“块”，它仍然不允许嵌套div元素   在里面。