代码之家 › 专栏 › 技术社区 › sorin

如何限制锚定HTML元素(<a>标记)的宽度[[副本]

html5 css

sorin · 技术社区 · 6 年前

我试图限制一个html元素的宽度,这样它就会被忽略,避免在屏幕上占用太多空间。

目前我没有改变文档结构的灵活性,所以我正在寻找一个纯CSS解决方案。

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

2 回复 | 直到 6 年前

connexo 6 年前

更改 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>

是 inline . 内联 元素不接受 width max-width , min-width height .

Zuhair 6 年前

试试这个:

 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>