TextFit

JavaScript

テキストをコンテナ幅にすばやくフィットさせる「TextFit」

TextFitは、一行または複数行のテキストをコンテナ幅(オプションにより高さも)にすばやくフィットさせられるjQueryフリーコンポーネントです。特定のコンテナ内にテキストをキレイに収めたい場合には最適な機能ですね。

TextFit

デモ

デモではコンテナに収められた様々なテキストを見ることができます。一行で書かれたものから複数行で書かれたものまでいろんなテキストが用意されています。単語が途中で切れることなくキレイに収まるそのサマはとても気持ちがいいですね。

ファイル容量も4.1KBととてもコンパクトだし、gzip版では1.5KBほどしかありません。サポート済みのブラウザも、IE9+、Firefox、Chrome、Opera、ほとんどのモバイルブラウザなど、たくさんの種類に対応しているのがグッドです。

また、TextFitのセッティング項目には、alignVert、alignHoriz、multiLine、detectMultiLine、minFontSize、maxFontSize、reProcess、widthOnly、alignVertWithFlexboxといったものが用意されています。軽量ながらもカスタマイズ性もしっかり備えています。

TextFit

関連記事

  1. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  2. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  3. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  4. footerMenu

    JavaScript

    スクロールでフッターメニューを表示させる「footerMenu」

    footerMenuはスクロールするとフッターメニューを表示させること…

  5. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP