私はDivを持っていますが、それが68pxより大きい場合は残りのコンテンツを非表示にして、それを展開するオプションを表示します。divの高さに応じて展開/折りたたみボタンを表示
問題は、divが68pxよりも高いときを検出する方法がわかりません。特にdivが反応的であるためです。
PHPで文字をカウントしようとしましたが、文字数によっては展開ボタンが表示されました。しかし、この技法は、いくつかの文字が他の文字よりも広いので、非常に正確ではありません。
これは私がこの問題を解決しようとしているウェブサイトです。http://www.metagame.gg/champions/azir#comp
あなたが認めることができるように、それは応答性であるので、これは問題が難しくなります。真ん中のボックス "弱い敵"は展開する必要はありません。 
私はJavaScriptを使用して、これに対する解決策を見つけようとしています
は事前にありがとうございました/ CSS/HTMLあなたはjQueryを使ってそれを行うことができます：ここでは
は絵です。jQuery('.expandClicker').each(function(){
if (jQuery(this).parent().height() < 68) {
jQuery(this).fadeOut();
}
});...
あなたはまた、置き換えることができfadeOut();で：すべての
jQuery(this).css({'display':'none'});
まず、私はテーブルを使用することはお勧めしません。あなたのスクリーンショットに見られるように、各セルに対してただ1つの行と1つの列が表示されます。
テキストを別のdiv（内部ラッパー）でラップし、外側ラッパーでmax-widthを使用することをお勧めします。 JSを使用すると、内側ラッパーの高さが外側ラッパー（max-）の高さよりも大きいかどうかを比較できます。正の場合は、外部ラッパーにクラスを追加します。このクラスは、「もっと読む」リンクの可視性をトリガーします。
作業するソースコードを提供していないため、jsFiddleまたは任意のコードを提供することはありません。また、リンクされたページの開発者ツールを使用してjsFiddleでページを再作成することは望ましくありません。
jQueryを使用して、cssクラスのwidth属性を調べることをお勧めします。応答するdiv要素に関しては
：あなたのCSS内
、ボックスの幅が小さく、画面上のとき（最大幅：980px）ときボックスの幅、100％画面サイズ> 1300ピクセル幅は32.8％です。したがって、widthプロパティを見て、それに応じて動作するスクリプトを書くことができます。幅が32.8％の場合は高さを確認し、高さが希望より大きい場合はロジックを適用します（see article here）。高発見に関しては
：他の人が言っているよう
高さを適用するには、div要素の高さプロパティを見ている場合です。希望の最大高さよりも大きい場合は、希望のCSSを適用します。続きを読むに関しては
：
は、この例を見てみましょう：それは基本的に何をしているか
はあなたがPHPでやろうとしていたもので、それは文字カウントを見て、 read moreがまだクリックされていない場合は、最後の最大文字の後のテキストを分割し、残りのテキストを隠れた範囲に配置します。
もっと読むを押すと、すでに表示されているテキストの横にある非表示スパン内のすべてのテキストを表示します。ここ
http://codepen.io/maxds/pen/jgeoA/
そのcodepenからコードされています
<html>
<head>
<title>jQuery Read More/Less Toggle Example</title>
<style>
.morecontent span {
display: none;
}
.morelink {
display: block;
}
</style>
</head>
<body>
<span class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
<script type="text/javascript">
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
</body>
</html>
ありがとう –
は、あなたの答えをいただき、ありがとうございます。この場合にテーブルの使用をお勧めしない理由について、いくつかの洞察を教えてください。私はあなたに同意します（これは1年前に私が非常に初心者の開発者だったときに作成されました）が、もし特定の欠点があるかどうかを知りたいです。 –
3つのセル（外側のラッパーになる可能性があります）が1つの単一のテーブルを使用するか、まったくテーブルを使用しない場合でも、各セルに新しいテーブルを使用してどのような利益を得ますか？ 実際にテーブルデータを表示するためにのみテーブルを使用してください。他のすべてはちょうど悪い習慣です。 代わりに（ブートストラップのような）グリッドシステムを使用し、あらかじめ定義された簡単な応答機能を使用します。 – Seika85