CSS: Wrap text AND break word if necessary

问题:

How can I set up a div such that it will wrap text AND will also break word if necessary? Examples below, with the dots showing the width of the div ("zzzzzzz..." is all one word).

....................................
Hello these are
words

....................................
zzzzzzzzzzzzzzzzzz
zzzzzz

回答1:

You can use css word-wrap: break-word;

.wrap {
  width: 50px;
  word-wrap: break-word;
  border: 1px solid red
}

<div class="wrap">This is a mormal div wrapping and breaking words</div>

回答2:

and if you want a word to be separated at a certain position when it's too long for the container, you can use the ­ entity (soft hyphen). So the HTML

singledoubletriple­quadruplequintupleburger 

will remain

singledoubletriplequadruplequintupleburger

on the screen when it fits in one line, but become

singledoubletriple-
quadruplequintupleburger

if the line is shorter