CODEWITHSUNDEEP
jqueryhtmlcssword-break
Alex Man
Alex Man

Reputation: 4886

break long word into multiple lines

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

Upvotes: 3

Views: 5084

Answers (4)

madalinivascu
madalinivascu

Reputation: 32354

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;

Upvotes: 1

Lubos Voska
Lubos Voska

Reputation: 177

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>

Upvotes: 1

Shobhit Srivastava
Shobhit Srivastava

Reputation: 549

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>

Upvotes: 6

Bhavin Shah
Bhavin Shah

Reputation: 2482

.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.

Upvotes: 5

Related Questions