Question

我有一个模式，它会为dataTable中的每一行弹出这样的模式：

<div id="verifyModal" class="modal">
  <div class="modal-content">
    <h2>Verify # <span id="verify-modal-id"></span></h2>
    <pre><code class="" id="verifyCode">
      hash = '<span class="break" id="verify-modal-hash"></span>'
...
</div>

根据行数据动态更新verify-modal-hash的值。问题在于散列是一个很长的字符串，它跨过了模态的宽度。我当前针对该模式的CSS：

pre code {
  font-size: 11px;
  display: inline-block;
  word-wrap: break-word;
}
span.break {
  color: red;
  display: inline-block;
  word-wrap: break-word;
}

我尝试了在其他类似问题中发现的答案，但到目前为止，它们似乎都没有起作用。

Answer 1

尝试一下，更新代码。

在css中更新pre标签，而不使用浏览器给出的默认css作为pre标签。

看看下面的代码片段：

span.break {
  color: red;
  word-wrap: break-word !important;
  width: 100px !important;
  display: block !important;
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

<div id="verifyModal" class="modal">
  <div class="modal-content">
    <h2>Verify # <span id="verify-modal-id"></span></h2>
    <pre><code class="" id="verifyCode">
      hash = '<span class="break" id="verify-modal-hash"> jgjjgjjgjgjgjgjgjjgjgjgjjgjgjgjgjjgjgjgjjgjgjgjgjgjgjgjgjjg</span>'
      </code>
      </pre>
  </div>

Answer 2

<pre>的默认浏览器样式为white-space: pre;，因此请尝试添加

span.break {
  white-space: normal;
}

断字：预标签内的断字失败

2 个答案: