隱藏並顯示基於溢出的一些div

Question

我有一個動態表格，在顯示大文本的第一個單詞後，如果用戶想要讀取他用來點擊的完整數據，我已隱藏查看更多按鈕可讀完整的數據工作正常，但問題是如何顯示更多的視圖，只有在其中溢出文本的行。

PHP的解決方案

只需在PHP中，我們可以使用strlen()並能給出的條件一樣

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

，但不能承擔多少個字符究竟適合在div，因爲用戶可以使用輸入，使得文本計數可能會有所不同，所以它不會工作。

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

在這裏我能找到它的div得滿滿當當，但由於表是動態的，我不知道確切的IDS我想是這樣

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

此功能在頁面底部的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>

就像這樣。