How do I limit the width of an anchor HTML element ( tag)? [duplicate]

Question

I am trying to limit the width of an A html element which so it would be snortened and avoid taking too much space on screen.

At this moment I do not have the flexibility of changing the structure of the document so I am looking for a pure CSS solution.

I tried this but it didn't had any effect, the text still takes all the space available.

<html>
    <head>
        <style>
            a.data {
                color: red;
                text-overflow: ellipsis;
                width: 4ch;
                max-width: 4ch;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <span>
            <a class="data">012345668</a>
            and some other text
        </span>
    </body>
</html>

connexo · Accepted Answer

Changing the a's display property to inline-block will do the trick:

a.data {
  color: red;
  text-overflow: ellipsis;
  width: 4ch;
  max-width: 4ch;
  overflow: hidden;
  display: inline-block;
}

<span><a class="data">012345668</a> and some other text</span>

The reason is that the default display for a is inline. inline elements don't accept width, max-width, min-width and the same for height.

How do I limit the width of an anchor HTML element (<a> tag)? [duplicate]

Tags:

html

css

sorin

1 Answers

connexo

Recent Activity

Donate For Us