word-break: break-word failing inside pre tag

Question

I have a modal that pops up for each row in a dataTable as such:

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

The value of verify-modal-hash is dynamically updated based on the row data. The problem is that the hash is a very long string and it crosses the width of the modal. My current CSS for this modal:

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

I tried answers I found in other similar questions but none of them seemed to work so far.

Answer 1

Try this, updated the code.

Update the pre tag in css, not using the default css given by the browser to pre tag.

Have a look at this code snippet:

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>