[解決済み] JavaScriptで文字幅を計算する
2022-03-19 18:13:37
質問
JavaScriptで文字列の幅を計算したいのですが、どうすればいいですか?等幅の書体を使わなくても可能でしょうか?
内蔵されていない場合は、各文字の幅のテーブルを作成することしか考えられませんが、これはかなり無理があります。 ユニコード と異なる文字サイズ(そしてすべてのブラウザー)。
解決方法は?
以下のようなスタイルでDIVを作成します。JavaScriptで、測定しようとするフォントサイズと属性を設定し、DIVに文字列を入れ、DIVの現在の幅と高さを読み取ります。DIVは内容に合わせて伸縮し、サイズは文字列のレンダリングサイズと数ピクセル以内に収まるでしょう。
var fontSize = 12;
var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px"
console.log(height, width);
#Test
{
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap; /* Thanks to Herb Caudill comment */
}
<div id="Test">
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
関連
-
[解決済み] テスト
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
jQueryのコピーオブジェクトの説明
-
JavaScriptの配列共通メソッド解説
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)