CODEWITHSUNDEEP
javascripthtmlcss
Paddy Hallihan
Paddy Hallihan

Reputation: 1686

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?

Upvotes: 1

Views: 2441

Answers (2)

dporechny
dporechny

Reputation: 646

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>

Upvotes: 7

j08691
j08691

Reputation: 207901

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.

Upvotes: 1

Related Questions