Слова продолжают ломаться в HTML

Question

У меня есть текст, составленный из "

" и "

• ", внутри блока.

  Нет проблем со списками, но слова в абзацах разделяются на наполовину, когда они достигают заполнения поля.

  мой текст

  <style>
  @media (min-width: 768px)
  <style>
  .col-md-12 {
      flex: 0 0 100%;
      max-width: 100%;
      }
  .alert {
      position: relative;
      padding: 0.75rem 1.25rem;
      margin-bottom: 1rem;
      border: 1px solid transparent;
      border-radius: 0.25rem;
  }
  .alert-warning {
      color: #856404;
      background-color: #fff3cd;
      border-color: #ffeeba;
  }
  .garrigues_RemindersAML__Exvyp {
      position: relative;
      padding: 0.75rem 1.25rem;
      margin-bottom: 1rem;
      border: 1px solid transparent;
      border-radius: 0.25rem;
      color: #0c5460;
      border-color: #ffeeba;
      text-align: justify;
  }
  </style>
  
  <div class="row" style="margin-top: 15px;">
     <div class="alert alert-warning garrigues_RemindersAML__Exvyp col-md-12">
        <p style="font-size: 17px;margin-left:0px;">Reminder </p>
        <p>&nbsp;A&nbsp;priori,&nbsp;it&nbsp;is&nbsp;not&nbsp;necessary&nbsp;to&nbsp;request&nbsp;any&nbsp;document&nbsp;from&nbsp;this&nbsp;type&nbsp;of&nbsp;clients.&nbsp;The&nbsp;following&nbsp;documents&nbsp;must&nbsp;be&nbsp;obtained&nbsp;from&nbsp;public&nbsp;sources&nbsp;of&nbsp;information,&nbsp;and&nbsp;included&nbsp;in&nbsp;the&nbsp;AML&nbsp;questionnaire:</p>
        <ul>
           <li>Documentation&nbsp;proving&nbsp;that&nbsp;it&nbsp;is&nbsp;one&nbsp;of&nbsp;the&nbsp;clients&nbsp;considered&nbsp;low&nbsp;risk.</li>
           <li>Documentation&nbsp;accrediting&nbsp;the&nbsp;activity&nbsp;(for&nbsp;example,&nbsp;annual&nbsp;accounts&nbsp;or&nbsp;screenshot&nbsp;of&nbsp;the&nbsp;website).</li>
        </ul>
        <p>&nbsp;If&nbsp;the&nbsp;customer&nbsp;is&nbsp;a&nbsp;subsidiary&nbsp;or&nbsp;branch&nbsp;of&nbsp;a&nbsp;financial&nbsp;entity&nbsp;or&nbsp;of&nbsp;listed&nbsp;companies&nbsp;whose&nbsp;securities&nbsp;are&nbsp;admitted&nbsp;to&nbsp;trading&nbsp;in&nbsp;a&nbsp;market&nbsp;regulated&nbsp;in&nbsp;the&nbsp;EU&nbsp;or&nbsp;Equivalent&nbsp;Third&nbsp;Countries,&nbsp;it&nbsp;must&nbsp;be&nbsp;justified&nbsp;that&nbsp;they&nbsp;belong&nbsp;(directly&nbsp;or&nbsp;indirectly&nbsp;in&nbsp;more&nbsp;than&nbsp;50%&nbsp;to&nbsp;the&nbsp;financial&nbsp;or&nbsp;listed&nbsp;entity).</p>
        <p>&nbsp;This&nbsp;client&nbsp;has&nbsp;LOW&nbsp;RISK&nbsp;and,&nbsp;therefore,&nbsp;applies&nbsp;SIMPLIFIED&nbsp;MEASURES&nbsp;OF&nbsp;DILIGENCE&nbsp;DUE.</p>
     </div>
  </div>

  Я перепробовал все, чтобы они не сломались, но есть только 2 результата: они ломаются или абзац выходит за рамки.

  I перепробовал все варианты с пробелами, переносом слов, переносом по переполнению, переполнением, отображением, шириной, полем, высотой ... И результат всегда одинаков: они ломаются или переполняются.

  Есть ли способ предотвратить их взлом, поместить их в следующую строку вместо того, чтобы переполнять их?

  Заранее спасибо.

  Редактировать: каждый абзац происходит из базы данных, и затем он рендеризуется компонентом в веб-приложении React, код не так прост, как кажется.

Answer 1

Вы пробовали " перенос слов: break-word; "?

Я пробовал это и оно работает.

Answer 2

Текст не может разбиваться между словами, потому что используются только   s (что означает «не пробел»). Используйте обычные пробелы.

p {
  background: teal;
  width: 150px;
  margin: 1em;
}

<p>This text has a long_long_word to test the issue</p>

<p>This&nbsp;text&nbsp;has&nbsp;a&nbsp;long_long_word&nbsp;to&nbsp;test&nbsp;the&nbsp;issue</p>