0

I have a text composed by "< p >" and "< ul >< li >", inside a box.

There's no problem with the lists, but the words in the paragraphs are splitting in half when they reach the padding of the box.

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>

I've tried everything to prevent them to break, but there's just 2 results: they break, or the paragraph overflows outside the box.

I've tried all the options with white-space, word-break, overflow-wrap, overflow, display, width, margin, height... And the result is always the same: they break or they overflow.

Is there a way to prevent them from breaking, placing them in the next line, instead of overflowing them?

Thank you in advance.

Edit: each paragraph comes from a database, and then is renderized by a component in a React web application, the code is not as simple as it seems.

Manu R
  • 25
  • 6

2 Answers2

0

The text can't break between the words because there are only &nbsp;s (which is for 'non breaking space') used. Use normal space characters.

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>
lupz
  • 3,620
  • 2
  • 27
  • 43
  • I wish that was the problem, but in my CSS that property is not used. – Manu R Jan 14 '20 at 10:52
  • I think that I got it now. Please check my updated answer. – lupz Jan 14 '20 at 11:01
  • Yes! this solved it! well, I know this is the solution because it works in the snippet, but I have to figure out how to add it to the React application. Thank you so much, you've saved my day. – Manu R Jan 14 '20 at 11:17
0

Have you tried "word-wrap: break-word;"?

I have tried this and its working.

Muhammad bux
  • 36
  • 1
  • 6