html - Weird width on a link styling

Question

Weird width on a class, for some reason when the link drops onto two lines the box displays at max-width leaving a lot of space to the right. Is there any way of resolving this without having to get rid of max-width? Would it be a case of using 2 seperate styles for multi-line/single line?

Thanks

{
position: absolute;
left: 190px;
padding: 4px 8px;
top: 100px;
font-size: 0.9em;
font-weight: 400;
max-width: 110px;
}

Answer 1

那是因为这两个词的宽度大于 110px。因为你max-width是 110px 它没有扩展。

您可以使用省略号来截断文本

a{
    position: absolute;
    left: 190px;
    padding: 4px 8px;
    top: 100px;
    font-size: 0.9em;
    font-weight: 400;
    max-width: 110px;
    background:red;
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
}

演示