Показать обрезанный текст при наведении с помощью 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>

это не работает, как ожидалось, хотя. Есть идеи?

спасибо.

Answer 1

Измените direction текст на hover, чтобы он переполнялся с левой стороны, а не справа.

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

Обратите внимание, что я должен был сократить ширину кнопки в этом фрагменте кода, чтобы сделать «более длинный пример» на самом деле переполнение.