CSSでホバー上に切り抜いたテキストを表示

Question

キャプションの異なるボタンに共通のボタンスタイルを作成しました。ボタンの幅は固定されているため、テキストが収まらないことがあります。フォントが小さくなると、そのテキストが判読できないほど小さくなるので、フォントを小さくすることは役に立ちません。私の考えは、テキストが左に来るようにして、隠れている部分がマウスのホバーに表示されるようにすることです。ただし、テキストは長すぎる場合にのみ移動する必要があります。ボタンに収まると動かないでください。しかし、予想通り

.button { 
 
    display: block; 
 
    font-size: 11px; 
 
    height:30px; 
 
    overflow: hidden; 
 
    padding: 3px 5px 0 0; 
 
    text-align: right; 
 
    text-overflow: " "; 
 
    white-space: nowrap; 
 
    width: 120px; 
 
    background-color: #ccc; 
 
    border-radius: 5px; 
 
    margin-bottom: 5px; 
 
} 
 

 
.button:hover { 
 
    padding-right: 120px; 
 
}

<a href="" class="button">Short</a> 
 
<a href="" class="button">Longer example</a>

それdoesntの仕事：これは私のコードです。何か案は？

ありがとうございます。

Answer 1

ホバー上のテキストのdirectionを変更して、右側ではなく左側にオーバーフローさせるようにします。

.button { 
 
    display: block; 
 
    font-size: 11px; 
 
    height:30px; 
 
    overflow: hidden; 
 
    padding: 3px 5px 0 0; 
 
    text-align: right; 
 
    text-overflow: " "; 
 
    white-space: nowrap; 
 
    width: 66px; 
 
} 
 

 
.button:hover { 
 
    direction:rtl; 
 
}

<a href="" class="button">Short</a> 
 
<a href="" class="button">Longer example</a>

私は実際にあふれ、「長い一例」を作るために、このスニペットでは、ボタンの幅を短くしなければならなかった注意してください。