CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel O.
Daniel O.

Reputation: 196

HTML - Convert String to multiple lines

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>

Upvotes: 0

Views: 2017

Answers (1)

Dillinger
Dillinger

Reputation: 1903

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>

Upvotes: 1

Related Questions