維持しているサイトの1つ（およびライブラリとしてJQuery）にDrupalを使用しています。私たちのページの1つは、ビューを並べ替えるためにjquery-isotopeプラグイン（特にviews-isotopeモジュール）を使用し、本文フィールドのコンテンツを完全に表示するためにfancyboxを使用しています。これは、現状では、ボディのコンテンツのほとんどがcssの高さとoverflow：hiddenによって隠されているためです。
ご想像のとおり、このような大雑把な方法はあまり見栄えがよくありません。テキストの多くは切り取られており、予備のセリフなどが残されており、特に「汚れた」ように見えます。この次のステップは、テキストが途切れないように、テキストを切り捨てて「...」を追加することでした。
ただし、fancyboxはコンテンツを現状のままオーバーレイにプルします。したがって、本文のテキストを切り捨てると、オーバーレイでも切り捨てられます。
基本的に、私の質問は、fancyboxを開くクリックが発生するまでテキストを切り捨てる方法はありますか？クリックしたときに切り捨てを失うことなく、コンテンツ全体をfancyboxに送信するにはどうすればよいですか？これに取り組むためにjsfiddleを開始したとき、私はアイソトープもファンシーボックスも計算に組み込みませんでした。サブストリングで構築し、元のコンテンツのクローンを作成し、クリックでサブストリングを置き換えました。しかし、ご想像のとおり、これはページを壊します。これは、ランダムではなく、fancyboxに関連してこれを行うことだけを指示するものがないためです。また、fancyboxが閉じたときにテキストの切り捨てを再開する方法もわかりません。
これが私のjsfiddleです。
これがhtmlです：
<div class="element">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi. </p>
</div>
</div>
これがcssです：
.item {
width:300px !important;
height: 150px;
overflow: hidden; }
スクリプトは次のとおりです。
var originalState = $(".element").clone().text();
$(".item").each(function () {
if ($(this).text().length > 30) {
$(this).text($(this).text().substr(0, 27));
$(this).append('...');
}
});
$(".element").click(function () {
$(this).replaceWith(originalState);
});
これをfancyboxと結び付けて、クリックするまでテキストがトリミングされ、fancyboxが全文を取得し、閉じると、以前のトリミングされたスタイルに戻るようにするにはどうすればよいですか？
注：コードで致命的なエラーが発生した場合は、お知らせください。私はJavaScriptとJQueryの面で若いですが、学ぶのに非常に苦労しています。
ありがとう。