ある文字数を超えたら「….」のように表示させる

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

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

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

ソースが下記の場合。

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



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

$(‘.caritem li a’).each(function(i, v){
　　if($(v).text().length > 40){$(v).text($(v).text().slice(0, 40) + ‘ …’);}
});

 

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