Search code examples
jqueryhtmlcssword-break

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

Solution

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