ボタンのサイズが固定されていても、その中のテキストが増えます。

Question

ボタンのテキストが大きくなっても、ボタンのサイズを固定したかったのです。

私が今使っているコード：

.button { 
 
    border: none; 
 
    color: white; 
 
    padding: 10px 50px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 1px 1px; 
 
    transition-duration: 2s; 
 
    cursor: pointer; 
 
} 
 
.button4 { 
 
    background-color: #428BCA; 
 
    color: white; 
 
    height: auto; 
 
    width: auto; 
 
} 
 
.button4:hover { 
 
    background-color: #C0C0C0; 
 
}

<button class="button button4">Simplfy! 
 
    <br>Bona PARTe @ PT</button>

Answer 1

をあなたが自動動作しませんheight: 100px; width: 100px;ボタンの固定幅と高さを指定する必要があります。 autoオプションは、ボタンが中にあるものは何でもオブジェクトに適応します。

Answer 2

をあなたのボタンに幅、高さを追加し、あなたがオーバーフローテキストがここにoverflow: auto

.button4 { 
    width: 200px; 
    height: 100px; 
    overflow: auto; 
} 

を書き表示する場合である理由fiddle