HTML - Convert String to multiple lines

Question

I have an big Problem that I would like to solve.

PROBLEM

CODE EXAMPLE

.box {
  width:150px; 
  border: 2px solid black;
}

<div class="box">
  <p>THIS IS A LONG STRING<br>
  BUT_THIS_WOULD_BE_THE_PRBLEM_WHEN_A_STRING_HAVE_NO_SPACES!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>  
</div>

Maybe someone know how I can display the Text likes this.(Only in JS,JQuery,CSS)

WANTED RESULT

.box {
  width: 150px;
  border: 2px solid black;
}

<div class="box">
  <p>THIS IS A LONG STRING<br>AND_THIS_IS_THE-<br>CONVERTED_STR-<br>ING
</div>

Do you want to break just at X number of characters or only if that character is a non alpha character? Also does `Only in JS,JQuery,CSS` mean you don't want a PHP solution (if so I'd remove the PHP tag).. — chris85, Dec 07 '15 at 13:56
Only if that word is longer than the element and have no spaces.Thank you Theunis,that would be work — Daniel O., Dec 07 '15 at 13:58
Possible duplicate of [Wrapping long email addresses in small boxes](http://stackoverflow.com/questions/23776767/wrapping-long-email-addresses-in-small-boxes) — Abhitalks, Dec 07 '15 at 15:18

score 1 · Accepted Answer · answered Dec 07 '15 at 14:04

Maybe you should use word-wrap

Allow long words to be able to break and wrap onto the next line:

.box {
  width:150px; 
  border: 2px solid black;
  word-wrap: break-word;
}

<div class="box">
  <p>THIS IS A LONG STRING<br>
  BUT_THIS_WOULD_BE_THE_PRBLEM_WHEN_A_STRING_HAVE_NO_SPACES!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>  
</div>

1 Answers1