word-break：断词在 pre 标签内失败

Question

我有一个为数据表中的每一行弹出的模态：

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

我尝试了在其他类似问题中找到的答案，但 none 到目前为止似乎有效。

Answer 1

<pre> 的默认浏览器样式为 white-space: pre; 所以尝试添加

span.break {
  white-space: normal;
}

Answer 2

试试这个，更新了代码。

更新css中的pre标签，不使用浏览器给pre标签的默认css。

看看这段代码：

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>

word-break：断词在 pre 标签内失败

word-break: break-word failing inside pre tag

html

css

word-wrap