【JavaScript】CSSなしでテキストを要素幅いっぱいに収めるには

正確には「CSSでできない」が正しいです。

残念ながらそういったプロパティもないです。

そこでJavaScriptの力を借りることに

といっても便利なライブラリがあったので、
ここではJavaScriptでテキストを要素に収める方法を紹介。

要素幅にテキストをピッタリ収めたかった…

例えば幅固定のスライドメニューがあるとします。

▼ HTMLの一部はこういう感じ

▼ 実際の見た目はこのようになる

テキストが長すぎるとはみ出してしまう。この問題をテキスト幅に収めることで解決したかった

見てわかる通り、「水平方向に対してのズレ位置」みたいなラベルテキストが幅に収まってません。自動でテキストが折り返されちゃってます。

これをCSSで何とかしたかったんですが、どうやっても無理でした。文字数固定だったら方法もなくはないですが、あんまり汎用性が高くありません。

Fittyという便利なJavaScriptライブラリを見つけた

そこでJavaScriptで動的に設定することに

ライブラリを探してると良いのを見つけました。

その名もFittyというライブラリ

これは次の特長を持ったものです。

  • テキストを要素幅ピッタリに収められる
  • jQueryとかに依存しない。単体で動く

これが使ってみると本当に便利でした。

1.Fittyライブラリをヘッダとかで読み込み

まずGitHubからライブラリをダウンロード

これは独自して動かせるライブラリです。

▼ そしてヘッダなどで次のように読み込み

これだけ読み込んでおけばOKでした。

2.まずテキスト要素を定義

まずは要素幅に収めたいテキストを定義

▼ テキスト要素のHTML例

ここでのポイントは data-fitty  という独自属性を付与していることです。これを付けることで、JSコードから一括でテキストを幅に収めることができるようになります。

2.JSコードからテキストを要素幅に収める

そして次のコードを追加してみました。

▼ fittyによるコード例

これだけで data-fitty属性を持つ全ての要素に置いて、テキストがその要素幅にピッタリ収まるようにフォントサイズが変更されます。

ちなみに第2引数にはオプションを色々渡せます。例えば maxSize: 20  だと幅ピッタリに収めたいけどフォントサイズの上限は20pxまで、というように制限も可能です。

そしてminSizeオプションもあって、 minSize: 10  だと最小フォントサイズを10pxなどに指定可能。これも指定しておかないと長いテキストがはみ出してしまいます。

 

実際にはこういう見た目になりました。

Fittyがテキスト幅に合わせてフォントサイズを動的に調整してくれる。スゴク便利

しっかりと要素幅に収まっていてグッド

かなり見た目がよくなったので満足してます。

Fittyは便利なので活用していきたい

こういうライブラリは本当に重宝します。

テキストを文字幅に動的に収めるときに便利ですね。

以上、Fittyについてでした。ではまた(^^)/~~~

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください