2

我目前正在寻找一种解决方案，允许我以一种紧凑、易于阅读的方式显示大量日志输出。目标是隐藏尽可能多的信息，直到它们变得有趣，因为我们需要显示数千行日志输出。

通过在 td 中引入 div，我已经成功地阻止了我们的表格达到 2800 像素的宽度。现在，一旦用户将鼠标悬停在 div 上，我想向用户公开全部信息，但不会破坏表格的布局，也不需要在代码中两次包含所有信息，因为 html 已经接近 3-4 MByte。

可以使用 Javascript 和/或 JQuery，但我是新手，目前卡住了。

这是 html 代码的一个小简化示例。

    <head>
        <title>expose full details</title>
        <style>
            #codeline { width:150px; overflow:hidden; text-overflow: ellipsis; }
            #fullline { background: #EEE; z-index: 10; display: hidden; }
            #loglines { width:250px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
        </style>
    </head>
    <body>
    <table style="border:1px solid black;">
    <tr>
        <td>PASS</td>
        <td>2012-10-10 09:30:31</td>
        <td><div id="codeline">c:\myfiles\are\not\stored\here\testscript.py:line434</div></td>
        <td><div id="loglines">Here is a very long log output that might continue for 10-20 lines</div></td>
    </tr>
    <tr>
        <td>FAIL</td>
        <td>2012-10-10 09:30:32</td>
        <td><div id="codeline">c:\myfiles\are\not\stored\here\testscript.py:line439</div></td>
        <td><div id="loglines">Here is another very long log output that might continue for 10-20 lines</div></td>
    </tr>
    </table>

每一个提示都值得赞赏！

谢谢！

4

2 回答 2

0

我认为如果它们很大，您可能应该允许这些 div 滚动： 

#codelines, #loglines {overflow: auto; width: 250px; max-height: 500px }

overflow:auto 只会在必要时显示滚动条，所以它看起来比 overflow:scroll 要好得多。让他们滚动一个 500 像素（或 800 像素，等等）的日志记录框比拥有一个隐藏额外信息的巨大网页要好得多。

编辑：

如果你真的希望它只在悬停时可用，你可以使用这个：

#codelines:hover, #loglines:hover { overflow: hidden; width: 250px; max-height: 500px }
#codelines:hover, #loglines:hover {overflow: auto}

我从来没有真正看到过这样做。

于 2012-10-10T21:31:22.953 回答
0

重读这篇我在代码中有一个错字，在里面加上了一个额外的引号，我说稍微澄清了 id 和 class，我在里面说错了，当我的意思是 class 时说 style ......

首先，您需要了解一些事情。id="somename" 应该是整个文档中的唯一值，如果您想对项目进行分组以将它们设置为相同的样式，请使用 class="somename" 并使用 . 而不是 CSS 中的 # 。

您不清楚您希望数据显示在哪里，我相信这就是您想要做的，您可以使用#fullline 代码的绝对定位将其放置在您想要的位置。我阅读了您发表的关于想要使用绝对定位的工具提示样式的评论（在 showdtl 部分中动态调整，但从听起来您想要对文本进行静态放置的情况来看是最好的。我更改了整行的宽度，以便您可以看到它根据需要正确扩展。fullline 是您代码中的唯一 id 我单独留下来说明类和 id 的用法。我只是把它扔在一起，它可以工作，但我确定您需要进行一些调整才能获得所需的结果。

    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>expose full details</title>         
      <style>             
          .codeline { width:150px; overflow:hidden; text-overflow: ellipsis; }             
          #fullline { background: #FFCC66; z-index: 10; width: 250; display: hidden;  }             
          .loglines { width:250px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
      </style>     
    </head>

  <body>     
<script>
function showdtl(passedobj){
fullline.style.display = '';
fullline.innerHTML=passedobj.innerHTML;
}
function hidedtl(){
fullline.style.display = 'none';
}

</script>
      <table style="border:1px solid black;">     
          <tr>         
              <td>PASS</td>
              <td>2012-10-10 09:30:31</td>
              <td><div class="codeline">c:\myfiles\are\not\stored\here\testscript.py:line434</div></td>         
              <td><div class="loglines" onMouseOver="showdtl(this);return true" onMouseOut="hidedtl();return true" >Here is a very long log output that might continue for 10-20 lines</div></td>
          </tr>     
          <tr>         
              <td>FAIL</td>  
              <td>2012-10-10 09:30:32</td>         
              <td><div class="codeline">c:\myfiles\are\not\stored\here\testscript.py:line439</div></td>         
              <td><div class="loglines" onMouseOver="showdtl(this);return true" onMouseOut="hidedtl();return true">Here is another very long log output that might continue for 10-20 lines</div></td>
          </tr>     
      </table>         

<div id="fullline">

</div>    


    </body>
于 2012-10-10T22:32:33.180 回答