Break long words inside flex item

Question

I would like to break long words inside "div2", both div2 and div3 width cannot be greater than parent width (i.e 150px). The only thing that works is word-break: break-all but this will break short words as well.

#div1{
    display: flex;
    max-width: 150px;
    height: 100px;;
}
#div2{
    background-color: gray;
}
#div3{
    background-color: rgb(197, 181, 181);
}
#div4{
    width: 150px; 
    background-color: rgb(144, 199, 172);
}

<div id="div1">
        <div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
        <div id="div3">oooo</div>
</div>

<div id="div4">150 px - max width</div>

have you tried `break-word` instead of `break-all`? – Pete Apr 20 '18 at 14:13 — Pete, Apr 20 '18 at 14:13

Gerardo BLANCO · Accepted Answer · 2018-04-20T18:39:31.323

You can use break-word to break only in words

#div1 {
  display: flex;
  max-width: 150px;
  height: 100px;
  ;
}

#div2 {
  background-color: gray;
  word-break: break-word;
}

#div3 {
  background-color: rgb(197, 181, 181);
}

#div4 {
  width: 150px;
  background-color: rgb(144, 199, 172);
}

<div id="div1">
  <div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="div3">oooo</div>
</div>

<div id="div4">150 px - max width</div>

And break-all to break at any given point

#div1 {
  display: flex;
  max-width: 150px;
  height: 100px;
  ;
}

#div2 {
  background-color: gray;
  word-break: break-all;
}

#div3 {
  background-color: rgb(197, 181, 181);
}

#div4 {
  width: 150px;
  background-color: rgb(144, 199, 172);
}

<div id="div1">
  <div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="div3">oooo</div>
</div>

<div id="div4">150 px - max width</div>

More info available on MDN.

Hope this helps :)

Note that you will need to add a `width` or `max-width` to your divs in order to use `word-break` — goediaz, Apr 20 '18 at 14:18

Break long words inside flex item

1 Answers1

Linked