Each row in my dataTable triggers a modal to appear:
<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 content of verify-modal-hash is constantly changing based on the data in each row. The issue arises when the hash string becomes very long and exceeds the width of the modal. Here's the CSS I'm currently using 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've attempted solutions from similar questions, but none have resolved the problem thus far.