Alex Man Alex Man - 17 days ago 5
CSS Question

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

Answer

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