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

文字数が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を記述することで、40文字以降を「…」にまとめることが可能です。

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

 

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