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
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With