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

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

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

デモはこちら

設置方法

JS


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

1

2

3

4

5

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

{

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

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

});

HTML


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

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

1

2

3

4

5

6

7

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

</div>

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

</div>

パラメータ

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

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

jQueryプラグイン

WRITER

hoshino

ECのことを中心に書きたいと思います。ネタが無いときはプログラムやデザインのことも書きます。

この著者の記事を見る

PREVスターフィールドホームページをAMP対応 NEXTCINEMA4D モーショントラッカーを使用した実写合成

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

設置方法

Related