Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 702
Alex K Avatar asked Dec 19 '22 18:12

Alex K


2 Answers

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>
like image 123
Tushar Avatar answered Feb 17 '23 19:02

Tushar


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 &shy; entity (soft hyphen). So the HTML

singledoubletriple&shy;quadruplequintupleburger 

will remain

singledoubletriplequadruplequintupleburger

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

singledoubletriple-
quadruplequintupleburger

if the line is shorter

like image 31
Johannes Avatar answered Feb 17 '23 19:02

Johannes