разрыв слова: разрыв слова внутри пре тега

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

Я пытался найти ответы на другие похожие вопросы, но пока ни один из них не работал.

Answer 1

Попробуйте, обновил код.

Обновите предварительный тег в css, не используя 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>'
      
      

Answer 2

<pre> имеет стиль браузера по умолчанию white-space: pre;, поэтому попробуйте добавить

span.break {
  white-space: normal;
}