【jQuery】幅によって自動でテキストを省略してくれるプラグイン

横幅によってフォントサイズの調整と、文字長を自動で省略シてくれるjQueryプラグイン”Jquery-quickfit” が良さそうだったので使ってみた。

http://chunksnbits.github.io/jquery-quickfit/

デモはこちら

Demo

設置方法


$( window ).on( "resize", function()
{
	$( "#quickfit-a" ).quickfit( { max: 40, min: 16, truncate: false } );
	$( "#quickfit-b" ).quickfit( { max: 40, min: 20, truncate: true } );        
});

$( window ).on( "resize", function()

{

$( "#quickfit-a" ).quickfit( { max: 40, min: 16, truncate: false } );

$( "#quickfit-b" ).quickfit( { max: 40, min: 20, truncate: true } );

});

HTML


<div id="quickfit-a">
フォントサイズ最大:40、最小:16。文字省略:無し
</div>

<div id="quickfit-b">
フォントサイズ最大:40、最小:20。文字省略:有り
</div>

フォントサイズ最大:40、最小:16。文字省略:無し

</div>

フォントサイズ最大:40、最小:20。文字省略:有り

</div>

パラメータ

キー名	データ型	内容
max	数値	親要素の幅によってフォントサイズが大きくなる中で、許容する最大のフォントサイズ
min	数値	親要素の幅によってフォントサイズが小さくなる中で、許容する最小のフォントサイズ
truncate	bool	親要素をはみ出してしまう場合、文字を切ることを許容するかどうか

レスポンシブでのコーディングの時などで便利そうだ

Author Profile