親ボタンに応じたテキストサイズ

Question

3つのHTMLボタンがあります。

<button class='btn btn-default'>A</button> 
<button class='btn btn-default'>ABCDEFG</button> 
<button class='btn btn-default'>B</button> 

すべてのボタンに固定幅が必要です。 38px。私がCSSを設定したとき

.btn { width: 38px; } 

2番目のボタンのテキストがオーバーフローします。これをCSSでどうやって解決できますか？テキストは反復しないボタンに収まる必要があります。あなたの答えのための

EDIT

感謝。私は、テキストがボタンに収まるようにしたい。フィット感によって私はそれが隠れるべきではないという意味です。それは小さくなるはずです。あなたのBTNクラスに：

Answer 1

を追加します。以下のスニペットでは、ラベルの末尾に省略記号を追加するように、名前を折り返しではなく1行にするための「white-space：nowrap」と、「text-overflow：省略記号」を追加しましたもっとました。私はあなたのアプリケーションが何であるかはわかりませんが、あなたができることです。

.btn { 
 
    width: 50px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
}

<button class='btn btn-default'>A</button> 
 
<button class='btn btn-default'>ABCDEFG</button> 
 
<button class='btn btn-default'>B</button>

また、高さが調整可能とすることができるならば、あなたは、「ワードラップを：ブレーク言葉」を使用することができます文字がスタックできるようにします。

.btn { 
 
    width: 50px; 
 
    word-wrap: break-word; 
 
    overflow: hidden; 
 
}

<button class='btn btn-default'>A</button> 
 
<button class='btn btn-default'>ABCDEFG</button> 
 
<button class='btn btn-default'>B</button>

編集 あなたはまだ一人でCSSで行うことができないボタンに基づいてフォントを、スケーリングについて尋ねられたので、（私は、我々ができるようになります想像します我々はすでにscale widths using the viewportができるので、将来）。ここでは、必要なことをするために作成したJavaScript/jQueryのスニペットを示します。このスニペットで

$('.btn').each(function() { 
 
    var bw = $(this).width(); //Button's inner width, not including padding 
 
    var tw = $(this).children('span').outerWidth(true); //Text's width 
 
    var c = $(this).text().length; //Number of characters in label 
 
    var cw = tw/c; //Average width of each character 
 
    var max = Math.floor(bw/cw); //Maximum number of characters that can be visible, rounding down to the nearest whole number 
 
    //If there are too many characters, then apply the shrinking formula 
 
    if (c > max) { 
 
    var font = parseFloat($(this).css('font-size'), 10); //Get the CSS font-size as a number (in this case, it should be "16") 
 
    var new_cw = bw/c; //How much average space each character SHOULD take up in the button 
 
    font = font * new_cw/cw;//Typical "proportions" formula to get the scaled font size 
 
    $(this).css('font-size', font + 'px'); //Apply new font size to this button 
 
    } 
 
});

.btn { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 50px; 
 
    height: 30px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    font-size: 16px; 
 
    line-height: 22px; 
 
} 
 

 
.btn span { 
 
    line-height: normal; 
 
    vertical-align: middle; 
 
} 
 

 
.btn.big { 
 
    width: 70px; 
 
} 
 

 
.btn.biggest { 
 
    width: 80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='btn btn-default'><span>A</span></button> 
 
<button class='btn btn-default'><span>AB</span></button> 
 
<button class='btn btn-default'><span>ABC</span></button> 
 
<button class='btn btn-default'><span>ABCD</span></button> 
 
<button class='btn btn-default'><span>ABCDE</span></button> 
 
<button class='btn btn-default'><span>ABCDEF</span></button> 
 
<br /> 
 
<br /> 
 
<button class='btn big btn-default'><span>ABCD</span></button> 
 
<button class='btn big btn-default'><span>ABCDE</span></button> 
 
<button class='btn big btn-default'><span>ABCDEF</span></button> 
 
<button class='btn big btn-default'><span>ABCDEFG</span></button> 
 
<button class='btn big btn-default'><span>ABCDEFGH</span></button> 
 
<button class='btn big btn-default'><span>ABCDEFGHH</span></button> 
 
<br /> 
 
<br /> 
 
<button class='btn biggest btn-default'><span>ABCD</span></button> 
 
<button class='btn biggest btn-default'><span>ABCDE</span></button> 
 
<button class='btn biggest btn-default'><span>ABCDEF</span></button> 
 
<button class='btn biggest btn-default'><span>ABCDEFG</span></button> 
 
<button class='btn biggest btn-default'><span>ABCDEFGH</span></button> 
 
<button class='btn biggest btn-default'><span>ABCDEFGHH</span></button> 
 
<button class='btn biggest btn-default'><span>ABCDEFGHHH</span></button> 
 
<button class='btn biggest btn-default'><span>ABCDEFGHHHH</span></button> 
 
<button class='btn biggest btn-default'><span>ABCDEFGHHHHH</span></button>

、私はまた、別のボタンの幅を設定するので、このコードは、異なるサイズのボタンのために非常に適応する必要があります。私がこの式を参照しているコメントの中の "典型的な"比率 "公式"を言うとき、この式を指している：

A over B is equal to C over Dここで、Aは現在の文字幅（この例では約11）、Bは現在のフォントサイズこの例では）、Cはボタン内に収まる新しい文字の幅（ "new_cw"として計算されます）であり、BとCを掛けてAで割ってDを求めます。

よかった！

Answer 2

はあなたが単に "隠されたオーバーフロー" を追加することによって、これを達成することができますword-wrap

button { 
 
    width: 38px; 
 
    word-wrap: break-word; 
 
}

<button class='btn btn-default'>A</button> 
 
<button class='btn btn-default'>ABCDEFG</button> 
 
<button class='btn btn-default'>B</button>