单词不断中断 HTML

Question

我有一个由“

”和“

”组成的文本，放在一个盒子里。

列表没有问题，但段落中的单词在到达框的填充时分成两半。

my text

<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 个结果：它们中断，或者段落溢出框外。

我已经尝试了所有选项 white-space, word-break, overflow-wrap, overflow, display, width, margin, height... 结果总是一样的：他们中断或溢出。

有没有办法防止它们被破坏，将它们放在下一行，而不是溢出它们？

提前致谢。

编辑：每个段落都来自数据库，然后由 React web 应用程序中的组件呈现，代码并不像看起来那么简单。

Answer 1

文本不能在单词之间中断，因为只使用了  s（用于 'non breaking space'）。使用正常的 space 个字符。

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>

Answer 2

你试过“word-wrap: break-word;”吗？

我已经尝试过这个并且它有效。

单词不断中断 HTML

Words keep breaking in HTML

html

css

overflow

word

break