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

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

0 голосов
/ 14 января 2020

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

" и "

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

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

    мой текст 

    <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, код не так прост, как кажется.

Ответы [ 2 ]

0 голосов
/ 14 января 2020

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

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

0 голосов
/ 14 января 2020

Текст не может разбиваться между словами, потому что используются только &nbsp; 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>
...