CSSを使用して、ラッピングされていないテキストよりも小さくボタンを縮小するのを防ぐにはどうすればよいですか？

Question

私は基本的に "削除"という言葉のボタンがあります。

これは、現在、このCSSを使用する：

.btn-delete { 
    font-size: 32px; 
    background-image: none; 
    border: 1px solid transparent; 
    border-radius: 15px; 
    border-top: 0px; 
    color: #fff; 
    background: linear-gradient(to bottom, #ff0000, #d40000); 
    vertical-align: middle; 
    text-align: center; 
} 

また、COL-XS-2及びCOL-XS-オフセット-3を使用します。

ウィンドウを水平に小さくすると、ボタンの背景が縮小され、「D」の一部だけが表示されるまで「削除」テキストがゆっくりと切り取られます。

ボタンがフォントテキストを切断できないようにするにはどうすればよいですか？テキストが途切れ始める前に、ボタンの縮小が止まるようにしたいと思います。

Answer 1

はい、min-width = xxxを使用し、min-height = xxxも考慮する必要があります。テキストのピクセルサイズに合わせて設定します。

また、削除ボタンの画像を作成し、その最小値も指定することもできます。ただし、これはより複雑なソリューションです。