Css 如何限制锚定HTML元素（<；a>；标记）的宽度？_Css_Html

Css 如何限制锚定HTML元素（<；a>；标记）的宽度？

css html

Css 如何限制锚定HTML元素（<；a>；标记）的宽度？,css,html,Css,Html,我试图限制一个html元素的宽度，这样它就会被snortened，避免在屏幕上占用太多空间目前，我没有改变文档结构的灵活性，因此我正在寻找一个纯CSS解决方案我试过了，但是没有任何效果，文本仍然占据了所有可用的空间 <html> <head> <style> a.data { color: red; text-overflow: ellipsis

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

目前，我没有改变文档结构的灵活性，因此我正在寻找一个纯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>


a、 资料{
颜色：红色；
文本溢出：省略号；
宽度：4cm；
最大宽度：4厘米；
溢出：隐藏；
}
012345668
和其他一些文本

将

的显示属性更改为

内联块

将实现以下功能：

a.data{
颜色：红色；
文本溢出：省略号；
宽度：4cm；
最大宽度：4厘米；
溢出：隐藏；
显示：内联块；
}

012345668和其他一些文本

试试这个：

a.data{
颜色：红色；
文本溢出：省略号；
最大宽度：4厘米；
显示：内联块；
溢出：隐藏；
垂直对齐：顶部；
}


012345668和其他一些文本

您有一个未终止的span:）我已修复它。谢谢@Simon Hayter