Question

我有一个HTML片段，如下所示：

<pre>
Traceback (most recent call last):
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 69, in execute_job_and_create_log
    output = self._execute_job_and_create_log()
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 127, in _execute_job_and_create_log
    return self.execute_job_and_create_log__ftp()
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 133, in execute_job_and_create_log__ftp
    return self._execute_job_and_create_log__ftp()
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 140, in _execute_job_and_create_log__ftp
    port=self.job_group.remote.port, session_factory=SessionOnPort) as host:
  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 72, in __init__
    self._session = self._make_session()
  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 135, in _make_session
    session = factory(*args, **kwargs)
  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/error.py", line 151, in __exit__
    raise FTPOSError(*exc_value.args, original_exception=exc_value)
FTPOSError: [Errno 110] Timeout
Debugging info: ftputil 3.4, Python 2.7.13 (linux2)
</pre>

由于大多数用户都不关心细节，我想隐藏回溯，只显示前几个字符。

仅当您展开文本时，其余文本才可见。

这应该显示为超链接：“跟踪....”

该怎么做？

（我无法修改html，需要JavaScript / jquery / CSS解决方案）

Answer 1

这里是纯CSS解决方案。有点笨拙，但不需要jQuery

pre {
    width: 10em;
    height: 1em;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    background-color: lightgreen;
    border-radius: 8px;
    border: 2px solid #6c6;
    transition: width 1s ease;
}
pre:hover {
    width: 100%;
    height: auto;
    overflow: auto;
    text-overflow: clip;
}

<pre>
Traceback (most recent call last):
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 69, in execute_job_and_create_log
    output = self._execute_job_and_create_log()
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 127, in _execute_job_and_create_log
    return self.execute_job_and_create_log__ftp()
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 133, in execute_job_and_create_log__ftp
    return self._execute_job_and_create_log__ftp()
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 140, in _execute_job_and_create_log__ftp
    port=self.job_group.remote.port, session_factory=SessionOnPort) as host:
  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 72, in __init__
    self._session = self._make_session()
  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 135, in _make_session
    session = factory(*args, **kwargs)
  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/error.py", line 151, in __exit__
    raise FTPOSError(*exc_value.args, original_exception=exc_value)
FTPOSError: [Errno 110] Timeout
Debugging info: ftputil 3.4, Python 2.7.13 (linux2)
</pre>

Answer 2

尝试使用details和summary。它非常容易且快速实现。

您也不必处理任何单击事件或CSS类或其他任何事情。

查看此代码段：

let text = $("pre").html()
let header = text.split('\n')[0] // The header is the first line
text = text.substr(header.length); // The text everything besides the first line

// Set the html inside of the pre tag to a details/summary tag combo
$("pre").html(`<details>
    <summary>${header}</summary>
    ${text}
</details>`)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre>
Traceback (most recent call last):
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 69, in execute_job_and_create_log
    output = self._execute_job_and_create_log()
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 127, in _execute_job_and_create_log
    return self.execute_job_and_create_log__ftp()
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 133, in execute_job_and_create_log__ftp
    return self._execute_job_and_create_log__ftp()
  File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 140, in _execute_job_and_create_log__ftp
    port=self.job_group.remote.port, session_factory=SessionOnPort) as host:
  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 72, in __init__
    self._session = self._make_session()
  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 135, in _make_session
    session = factory(*args, **kwargs)
  File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/error.py", line 151, in __exit__
    raise FTPOSError(*exc_value.args, original_exception=exc_value)
FTPOSError: [Errno 110] Timeout
Debugging info: ftputil 3.4, Python 2.7.13 (linux2)
</pre>

Answer 3

您可以通过添加以下CSS /类来隐藏pre的文本：

binding.pry

要实现所需的行为，可以在单击时切换此类。

.hidden {
    text-overflow: ellipsis;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
}

这是一个有效的示例：

https://codepen.io/anon/pen/PvQJxr

Answer 4

您可以尝试以下代码段：

HTML

<pre id="my-content" onclick="ccc(this)" my-attr=``>
    MOJHIT
</pre>

JAVASCRIPT

<script>
    let content = `Traceback (most recent call last):
File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 69, in execute_job_and_create_log
  output = self._execute_job_and_create_log()
File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 127, in _execute_job_and_create_log
  return self.execute_job_and_create_log__ftp()
File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 133, in execute_job_and_create_log__ftp
  return self._execute_job_and_create_log__ftp()
File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 140, in _execute_job_and_create_log__ftp
  port=self.job_group.remote.port, session_factory=SessionOnPort) as host:
File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 72, in __init__
  self._session = self._make_session()
File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 135, in _make_session
  session = factory(*args, **kwargs)
File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/error.py", line 151, in __exit__
  raise FTPOSError(*exc_value.args, original_exception=exc_value)
FTPOSError: [Errno 110] Timeout
Debugging info: ftputil 3.4, Python 2.7.13 (linux2)`

    let element = document.getElementById('my-content');
    element.setAttribute('my-attr', content);
    element.innerHTML = element.getAttribute('my-attr').split('\n').join(' ').substr(0,10);
    element.onclick = ccc

    function ccc(event){
        event.target.innerHTML = event.target.getAttribute('my-attr');
    }
</script>

Answer 5

我满足以下条件

我将内容隐藏在pre标签中，仅显示前几个字符。
仅当您展开文本时，其余文本才应可见。

HelloComponent

pre{
 width: 11ch;
 height: 2ch;
 overflow: hidden;
 text-overflow: ellipsis;
 color:blue;
 text-decoration: underline;
}
pre:active{
 width: 100%;
  height: 100%;
  color:black;
 text-decoration: none;
}

Answer 6

如果您的项目中已经有引导程序。您可能要利用内置的弹出框：）

步骤： 1.隐藏回溯（使用CSS） 2.显示按钮（纯HTML） 3.设置JavaScript代码（JS / JQuery）

使用CSS隐藏回溯

<style>
    pre{
       display:none;
    }
</style>
<pre>
    Traceback (most recent call last):
      File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 69, in execute_job_and_create_log
        output = self._execute_job_and_create_log()
      File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 127, in _execute_job_and_create_log
        return self.execute_job_and_create_log__ftp()
      File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 133, in execute_job_and_create_log__ftp
        return self._execute_job_and_create_log__ftp()
      File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 140, in _execute_job_and_create_log__ftp
        port=self.job_group.remote.port, session_factory=SessionOnPort) as host:
      File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 72, in __init__
        self._session = self._make_session()
      File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 135, in _make_session
        session = factory(*args, **kwargs)
      File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/error.py", line 151, in __exit__
        raise FTPOSError(*exc_value.args, original_exception=exc_value)
    FTPOSError: [Errno 110] Timeout
    Debugging info: ftputil 3.4, Python 2.7.13 (linux2)
</pre>

在HTML的某处，您准备并显示弹出按钮

<button type="button" class="btn btn-lg btn-danger" data-placement="bottom" data-toggle="popover" title="The full Traceback">Traceback...</button>

设置将触发Bootstrap弹出窗口的Javascript

<script>
    $('[data-toggle="popover"]').popover({
      content: $('pre').text().trim()
    });
</script>

优势：

您可以显示所需的任何按钮文本。例如：“显示完整回溯”等。
利用Bootstrap弹出菜单选项。例如您可以轻松地控制弹出窗口的显示位置（左，右，底部，顶部）。有关更多信息，请转到https://getbootstrap.com/docs/4.3/components/popovers/
如何灵活地处理“追踪”数据

如果没有Bootstrap，则可能还希望在纯HTML，CSS，Javascript和JQuery中执行类似的方法。这就是...

<style>
    pre{
      display:none;
    }

    .full-trace-back{
      width: 500px;
      padding: 20px;      
      background:#fafafa;
      border: 1px solid #ddd;
      -webkit-border-radius: 5px;
              border-radius: 5px;
    }
</style>

  <pre>
    Traceback (most recent call last):
      File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 69, in execute_job_and_create_log
        output = self._execute_job_and_create_log()
      File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 127, in _execute_job_and_create_log
        return self.execute_job_and_create_log__ftp()
      File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 133, in execute_job_and_create_log__ftp
        return self._execute_job_and_create_log__ftp()
      File "/home/foobar_cok_p/src/foobar/foobar/models/job.py", line 140, in _execute_job_and_create_log__ftp
        port=self.job_group.remote.port, session_factory=SessionOnPort) as host:
      File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 72, in __init__
        self._session = self._make_session()
      File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/host.py", line 135, in _make_session
        session = factory(*args, **kwargs)
      File "/home/foobar_cok_p/lib/python2.7/site-packages/ftputil/error.py", line 151, in __exit__
        raise FTPOSError(*exc_value.args, original_exception=exc_value)
    FTPOSError: [Errno 110] Timeout
    Debugging info: ftputil 3.4, Python 2.7.13 (linux2)
  </pre>

  <script>
    (function () {      
      let isOpen = false;
      $('.trace-back-link').on('click', toggleFullTraceback);

      function toggleFullTraceback() {
        isOpen = !isOpen;
        if (isOpen) {
          const tracebackData = $('pre').text().trim();
          const tracebackLink = $('.trace-back-link');
          tracebackLink.after( "<p class='full-trace-back'>"+tracebackData+"</p>" );
        }else{
          const fullTraceback = $('.full-trace-back');
          fullTraceback.remove();
        }
      }
    }());
  </script>

显示前十个字符，单击时扩展（或悬停）

6 个答案:

HTML

JAVASCRIPT