ボタン幅に合わせて文字サイズを自動調整（縮小）するJavaScript

※当サイトにはプロモーションが含まれています。

クライアント

エクセルの“縮小をして全体を表示する”のように、ボタンの中の文字を必ず１行にしてくれ！

にゃテック

おけまるだにゃ。

たとえば、以下の様なボタンを作成したとします。

“大谷翔平”の2025年の成績を確認する

“テオスカー・ヘルナンデス”の2025年の成績を確認する

にゃのらいと

下の“テオスカー・ヘルナンデス”が、２行になっているにゃ。

このボタンを、エクセルにある“縮小をして全体を表示する”のように、テキストを可変（縮小のみ対応）にして必ず、１行に収まるようにしたいと思います。

※イメージを伝えるために、エクセルの例（画像含）をだしただけのため、本文とエクセルは関係ありません。

ボタン幅に合わせて自動的に文字サイズを縮小させる方法

おそらく、HTMLとCSSだけでは、“ボタン幅に合わせて自動的に文字サイズを縮小し、必ず１行に収める”ことはできないと思います。

たとえば、vwやclamp()を使うことで「画面幅に応じてフォントサイズを変える」ことはできます。

しかし、これはテキスト量ではなくビューポート幅を基準にした調整のため、「短いタイトル」と「長いタイトル」で同じボタン幅の場合、長い方だけを自動的に小さくすることはできません。

そのため、今回は、JavaScriptを使って文字幅を計測してフォントサイズを調整してみました。

HTML

<div class="nya-button-block">
<a href="#" class="nya-shrink-button">
“大谷翔平”の2025年の成績を確認する
</a>
</div>

<div class="nya-button-block">
<a href="#" class="nya-shrink-button">
“テオスカー・ヘルナンデス”の2025年の成績を確認する
</a>
</div>

nya-button-blockで、ボタンの大きさを指定しているので、divで囲みます。

続いて、CSSです。

CSS

/* ボタンの親ブロック（幅指定） */
.nya-button-block {
width: 340px;
margin-bottom: 1em;
}

/* フォント可変（自動縮小） */
.nya-shrink-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 4px 8px;
box-sizing: border-box;
border-radius: 4px;
background: #ff9900;
color: #fff;
text-decoration: none;
white-space: nowrap;
font-size: 1em;
line-height: 1.2;
}

white-space: nowrap;を使って、改行しないようにしています。

続いて、JavaScriptです。

JavaScript

(function () {
const buttons = document.querySelectorAll('.nya-shrink-button');
const MIN_FONT_SIZE = 12; // px 下限
const SAFETY_RATIO = 0.87; // はみ出し調整

buttons.forEach(btn => {
const style = window.getComputedStyle(btn);
const clientWidth = btn.clientWidth;
const paddingLeft = parseFloat(style.paddingLeft) || 0;
const paddingRight = parseFloat(style.paddingRight) || 0;
const maxInnerWidth = clientWidth - paddingLeft - paddingRight;
const currentFontSize = parseFloat(style.fontSize);
const currentScrollWidth = btn.scrollWidth;

// すでに収まっているなら何もしない
if (currentScrollWidth <= maxInnerWidth) {
return;
}

// 比率から「理論上のフォントサイズ」を計算し、安全係数を掛ける
let targetFontSize = currentFontSize * (maxInnerWidth / currentScrollWidth);
targetFontSize *= SAFETY_RATIO;

// 下限を適用
if (targetFontSize < MIN_FONT_SIZE) {
targetFontSize = MIN_FONT_SIZE;
}
btn.style.fontSize = targetFontSize + 'px';
});
})();

これは、.nya-shrink-buttonのボタンを対象に、ボタン幅からテキストがはみ出さないようフォントサイズを自動調整する処理をしています。

まず、ボタンの幅（clientWidth）と、現在のフォントサイズを取得します。

そのうえで、scrollWidth が幅を超えている（＝テキストが収まっていない）場合に、フォントサイズを少しずつ小さくしながら再チェックし、ちょうど1行に収まるまで繰り返しています。

const MIN_FONT_SIZE = 12;

の設定で、フォントサイズが12pxを下回らないようになっています。

にゃのらいと

10にすると、フォントサイズが10pxを下回らないようになるにゃ。

また、環境によっては、文字がはみ出てしまったこともあり、

const SAFETY_RATIO = 0.87;

は、文字がボタンからはみ出さないようにするための調整係数です。

0〜1の範囲で値を設定することで、確実にボタン内へ収まるように調整しています。

実際に記載すると下記のようになります。