オーバーフローに基づいて一部のdivを非表示にして表示

Question

大きなテキストから最初の数単語を表示した後に非表示にする動的な表が表示されるもっと見るボタンを読む完全なデータは正常に動作しますが、問題は、テキストがオーバーフローした行だけを表示する方法です。

のPHPソリューション

は単にPHPで我々はstrlen()を使用することができますし、

if(strlen($data) > 100){ 
    make visible 
} 

のような条件を与えることができますが、ユーザーが入力したので、それを使う可能性があるため、正確にdivの中に収まるどのように多くの文字を前提とカントテキストの数は変わる可能性がありますので動作しません。私があふれているのdivを見つけることができますが、テーブルがダイナミックだったので、私は

<tr> 
     <td> 
      <div id="hidden_field_{$row['his_id']}">{$row['his_data']}</div> 
     </td> 
     <td> 
     <br/> 
      <?php 
       $check_overflow=echo "<script>checkOverflow(document.getElementById('hidden_field_".{$row['his_id']}."'));</script>"; 
       if($check_overflow=="true"){ 
      ?> 
      <a id="get_view_more_{$row['his_id']}" onclick="view_more({$row['his_id'];});">View More</a> 
      <?php } ?> 
     </td> 
    </tr> 

この機能のようなものを試してみました正確なIDを知らないのJavaScriptソリューション

ここ

function checkOverflow(el) 
    { 
     var curOverflow = el.style.overflow; 
     if (!curOverflow || curOverflow === "visible") 
      el.style.overflow = "hidden"; 
     var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight; 
     el.style.overflow = curOverflow; 
     return isOverflowing; 
    } 

ページの下部にあるPHPの外でうまく動作します

<script> 
alert(checkOverflow(document.getElementById('hidden_field_1')));</script> 

Answer 1

省略記号を使用できます。ただこの方法のように

#div2 { 
 
    white-space: nowrap; 
 
    width: 12em; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    border: 1px solid #000000; 
 
} 
 
#div2:hover { 
 
    width: auto; 
 
    overflow: visible; 
 
    border: 1px solid #000000; 
 
}

<p>This div uses "text-overflow:ellipsis": when you hover this it's visible</p> 
 
<div id="div2">This is some long text that will not fit in the box</div>

。