verstecken und zeigen einige div basierend auf Überlauf

Question

Ich habe eine dynamische Tabelle, wo ich verstecken nach dem Anzeigen der ersten paar Worte aus einem großen Text, wenn der Benutzer die vollständigen Daten lesen möchte er klicken mehr anzeigen Schaltfläche zum Lesen die vollständigen Daten funktionieren einwandfrei, aber das Problem ist, wie man mehr anzeigen nur für die Zeilen zeigt, in denen Text übergelaufen ist.

Php Lösung

einfach in PHP können wir strlen() verwenden und Bedingung wie

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

aber kann nicht davon ausgehen, wie viele Zeichen genau passen in den div geben kann, weil die Benutzer so eingeben verwenden können, dass die Textanzahl kann variieren, so dass es nicht funktioniert.

JavaScript-Lösung

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; 
    } 

hier i, div ist überfüllt, aber da Tabelle i die genauen ids ich so etwas wie

versucht, weiß nicht, dynamisch war

<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> 

diese Funktion finden funktioniert gut außerhalb php am unteren Rand der Seite

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

Answer 1

können Sie Ellipsen verwenden.

#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>

wie diese Art und Weise.