break long word into multiple lines

Question

Can anyone please tell me some solution to break word like as shown below using css or jquery.

SAMPLE 1

ConfigTechnologyHormonyAppComponentBackOfficeLaunch

Need to break it into

ConfigTechnologyHo
rmonyAppComponentB
ackOfficeLaunch

SAMPLE 2

WorkAppComponentBackOfficeLaunchTechnologyNeteseen

Need to break it into

WorkAppComponentBa
ckOfficeLaunchTech
nologyNeteseen

SAMPLE 3

Supplement Hormony based on Continous Integration

Need to break it into

Supplement Hormony
based on Continous
Integration

I have tried with word-break: break-all; but its is not working

Answer 1

 .container{ max-width:100px; border:thin black solid; word-break:break-all; height:auto; } 

 <div class="container">Config TechnologyHormonyApp ComponentBackOfficeLaunch</div> 

Try this.

Hope this helps.

PS: change container max-width as per your need.

Answer 2

You need to specify a max-width according to your layout requirement for the text container. Have a look:

CSS:

p {
  max-width: 100px;
  word-break: break-all;
}

HTML:

<p>
ConfigTechnologyHormonyAppComponentBackOfficeLaunch
</p>

Answer 3

Try something like this:

 .product-name a:before { content:"ConfigTechnologyHo \\A rmonyAppComponentB \\A ackOfficeLaunch "; white-space: pre; font-size:18px; } .product-name a { text-indent:-9999px; font-size:0; text-decoration: none; } 

 <h2 class="product-name"> <a></a> </h2> 

Answer 4

You can do this with javascript

var text = 'WorkAppComponentBackOfficeLaunchTechnologyNeteseen';
var array = text.split('');
len = 18;//length of a single row

var newtext = '';
for(var i=0;i<array.length;i++) {
   newtext +=array[i];
if (i % len == 0 && i>1) {
    newtext += '</br>';//or \n\r
    }
}
document.getElementById('text').innerHTML = newtext;