では何
JSをオンにしていないユーザーにはフルテキストが表示されます(アクセシビリティに優れています)。以下は私たちがウェブサイトで使用しているものに基づいており、テキストをクリックすることによってフル/ショートテキストを切り替えることができますが、ホバーイベントに変更するのは簡単です。
最初に、自動的に展開/縮小するテキストを、div/spanでjQueryで後で取り上げるクラスにラップします。
<div class="autoShorten">An example is always better than description situation.</div>
は、その後、次のjQueryの関数を作成:
jQuery.fn.autoShorten = function() {
return this.each(function(){
if ($(this).text().length > 100) {
var words = $(this).text().substring(0,100).split(" ");
var shortText = words.slice(0, words.length - 1).join(" ") + "...";
$(this).data('replacementText', $(this).text())
.text(shortText)
.css({ cursor: 'pointer' })
.hover(function() { $(this).css({ textDecoration: 'underline' }); }, function() { $(this).css({ textDecoration: 'none' }); })
.click(function() { var tempText = $(this).text(); $(this).text($(this).data('replacementText')); $(this).data('replacementText', tempText); });
}
});
};
この機能は、単語の区切りに省略記号を挿入するのではなく、中
最終的には単語の途中で利益を持っているあなた$(document).ready
機能追加 $('.autoShorten').autoShorten();