Q:

Shortening a link using HTML/JS/CSS

I am trying to change the design of the navigation on my site.
We have some products with really long names and I want to cut them short and maybe add (...) or something similar at the end.
So something like this should look like abcdefg... instead of abcdefghijklmnopqrstuvwxyz

a{
  width:50px;
  overflow:hidden;
}
<a href="#">abcdefghijklmnopqrstuvwxyz</a>

A JS solution is welcome.
I would also like to know why the width isn't being applied?

A:

Use white-space combined with overflow & text-overflow. And don't forget to add display: inline-block to the a element, so you can apply width to it.

a {
  display: inline-block;
  width: 50px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
<a href="#">abcdefghijklmnopqrstuvwxyz</a>

A:

Anchors are inline elements by default and any width set on an anchor is ignored. Change the display to inline-block:

a {
  width: 50px;
  overflow: hidden;
  display: inline-block;
}
<a href="#">abcdefghijklmnopqrstuvwxyz</a>

As MDN states:

Inline elements are those which only occupy the space bounded by the
  tags defining the element, instead of breaking the flow of the
  content.

and...

You can change the visual presentation of an element using the CSS
  display property. For example, by changing the value of display from
  "inline" to "block", you can tell the browser to render the inline
  element in a block box rather than an inline box, and vice versa.
  Hovewer, doing this will not change the category and the content model
  of the element. For example, even if the display of the span element
  is changed to "block", it still would not allow to nest a div element
  inside it.

