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>

Answer 1

将a的显示属性更改为inline-block将达到目的：

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>

原因是a的默认显示为inline。 inline元素不接受width，max-width，min-width，而height则不接受。

Answer 2

尝试一下：

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

<html>
<head>
</head>
<body>
    <span style="display:inline-block">
        <a class="data">012345668</a> and some other text
    </span>
</body>
</html>

如何限制锚HTML元素（<a> tag)?

2 个答案: