一定の文字数以上は「….」として表示させる | 自動化する会社　オートプロジェクト

2015年5月20日

Tips

一定の文字数以上は「….」として表示させる

文字数が40文字以上の時は、それ以降を「…」と表示させる方法。

例えば、下記URLで使用しています。

http://www.imcshop.com/brand/eleven.htm

ソースが下記の場合。

<ul>
<li><a href=”../86/sheetcover/1110080093.htm”>TOYOTA86　ZN6型　Luxuryシリーズ　本革パンチングタイプ　クラッツィオ</a>　</li>
<li><a href=”../86/sheetcover/1110080094.htm”>TOYOTA86　ZN6型　Luxuryシリーズ　ラグジュアリータイプ　クラッツィオ</a>　</li>
<li><a href=”../86/sheetcover/1110080095.htm”>TOYOTA86　ZN6型　Luxuryシリーズ　スエードタイプ　クラッツィオ</a>　</li>
<li><a href=”../86/sheetcover/1110080096.htm”>TOYOTA86　ZN6型　Stylishシリーズ　キルティングタイプ　クラッツィオ</a>　</li>
<li><a href=”../86/sheetcover/1110080097.htm”>TOYOTA86　ZN6型　Stylishシリーズ　クラッツィオS　クラッツィオ</a>　</li>
<li><a href=”../86/sheetcover/1110080098.htm”>TOYOTA86　ZN6型　ベーシックシリーズ　ブロス・クラッツィオ　クラッツィオ</a>　</li>
<li><a href=”../86/sheetcover/1110080099.htm”>TOYOTA86　ZN6型　ベーシックシリーズ　ブロス・クラッツィオType2　クラッツィオ</a>　</li>
</ul>

下記のjQueryを記述することで、40文字以降を「…」にまとめることが可能です。

$(‘.caritem li a’).each(function(i, v){

　　if($(v).text().length > 40){$(v).text($(v).text().slice(0, 40) + ‘ …’);}

});

文章が一覧で並んでいる時に、最大文字数を制限させることで、見た目をそろえることが可能です。

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする

jQuery

<< 前の記事へ

一覧へ戻る

次の記事へ >>

合わせて読みたい [関連記事]