单词不断在HTML中破裂

Question

我在方框内有一个由“

”和“

• ”组成的文本。

  列表没有问题，但是当段落中的单词到达框的填充位置时，它们会分成两半。

  my text

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

  我已尽一切努力防止它们中断，但是只有两个结果：它们中断，或者该段落在框外溢出。

  我已经尝试了所有选项，包括空格，断字，溢出包装，溢出，显示，宽度，边距，高度...结果始终相同：它们折断或溢出。

  是否有防止它们破裂的方法，将它们放在下一行而不是使它们溢出？

  谢谢你。

Answer 1

在CSS的某处必须有break-word: break-all;属性，该属性会影响您的音乐盒或段落。

删除。

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

.breaking {
  word-break: break-all;
}

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

<p class="breaking">This text has a long_long_word to test the issue</p>

Answer 2

您是否尝试过“ 自动换行：断行；”？