異なる文字数のテキストを一定の同じ幅で一行に収めたいです。

前提・実現したいこと

異なる文字数のテキストを、同じ長さの幅に収めたいです。（手動で一つずつ調節する以外で）
文字サイズや文字間が自動的に変わり、同じ幅に収めることができるような良い方法はありますでしょうか。

例：「ミックスフルーツパフェ」と「トロピカルミックスフルーツパフェ」を同じ長さの幅に収める

試したこと

調べたのですが、検索ワードの選択が下手だったのか、いかなる方法も見つけられませんでした。

yoshinavi

2019/09/17 06:38

CSSのみが希望でしょうか？おそらくCSSのみでは「自動的」には不可かと思います。

行動規範の内容に同意します

回答2件

以下のコードで実現可能です。ただし、日本語の等幅フォント限定です。

HTML
1<div id=d1>あいうえおあいうえお</div>
2<div id=d2>かきくけこ</div>

JavaScript
1var d1l = document.getElementById("d1").textContent.length;
2var d2l = document.getElementById("d2").textContent.length;
3var p1 = document.getElementById("d1").parentNode.clientWidth;
4var p2 = document.getElementById("d1").parentNode.clientWidth;
5var f1 = Math.floor(p1 / d1l);
6var f2 = Math.floor(p2 / d2l);
7document.getElementById("d1").style.fontSize = f1 + "px";
8document.getElementById("d2").style.fontSize = f2 + "px";

CodePen - コード
 CodePen - フルビュー

簡単に仕組みの紹介
1,2行目でd1,d2のIDがついたタグの文字列の長さを取得
3,4行目でd1,d2のIDがついたタグの親要素の幅を取得
5,6行目で親要素/文字列の長さで１つあたりの文字の大きさを計算この時に小数点以下を切り捨てる
7,8行目でd1,d2のIDがついたタグにそれぞれ大きさを反映

5,6行目で小数点以下を切り捨てるのはpxに小数は存在せず一般的に切り上げられて微妙に文字の大きさが大きくなりはみ出してしまいます。

変数使わないなら

JavaScript
1document.getElementById("d1").style.fontSize = Math.floor(document.getElementById("d1").parentNode.clientWidth / document.getElementById("d1").textContent.length) + "px";
2document.getElementById("d2").style.fontSize = Math.floor(document.getElementById("d2").parentNode.clientWidth / document.getElementById("d2").textContent.length) + "px";