html - リンクのスタイリングの幅がおかしい

Question

クラスの幅がおかしい。何らかの理由で、リンクが 2 行に落ちると、ボックスが max-width で表示され、右側に多くのスペースが残される。max-width を取り除かずにこれを解決する方法はありますか? 複数行/単一行に2つの別々のスタイルを使用する場合はありますか?

ありがとう

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

Answer 1

これは、これら 2 つの単語の幅が 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;
}

デモ