隐藏并显示基于溢出的一些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>

就像这样。