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>

就像这样。

隐藏并显示基于溢出的div

1 个答案: