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>

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 wele.

I would also like to know why the width isn't being applied?

• javascript
• html
• css

Share Improve this question Follow edited Apr 17, 2019 at 19:22 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 7, 2019 at 14:48 Paddy HallihanPaddy Hallihan 1,70655 gold badges3434 silver badges9090 bronze badges 1

• w3schools./cssref/css3_pr_text-overflow.asp also anchor by default displays inline so add display: block / inline-block if you want overflow property to be used – digital-pollution Commented Mar 7, 2019 at 14:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Use white-space bined 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>

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.