一定の文字数以上は「….」として表示させる
文字数が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) + ‘ …’);}
});
文章が一覧で並んでいる時に、最大文字数を制限させることで、見た目をそろえることが可能です。
