根据溢出隐藏和显示一些 div

Question

我有一个动态表格，在显示大文本中的前几个单词后，如果用户想要阅读完整的数据，他可以点击 查看更多 按钮来阅读完整的数据它工作正常，但问题是如何仅针对其中已溢出文本的行显示更多视图。

PHP解决方案

简单地在 php 中我们可以使用strlen() 并且可以给出类似的条件

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

但不能假设有多少个字符完全适合 div，因为用户可能会使用 enter，因此文本计数可能会有所不同，因此它不会起作用。

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 溢出，但由于表是动态的，我不知道确切的 id，我尝试过类似的方法

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

就这样。