Long words overflow flex container

Question

Does anyone know how to avoid overflowing of long words in flex container?

.wrap{
  display:flex;
  overflow-wrap: break-word;
  max-width:100%;
}

<div class="wrap">
  <div class="a">
    a
  </div>
  <div class="b">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
  </div>
</div>

I only found this thread Break long words inside flex item but it doesn't solve the problem

Thank you

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Sep 11 '18 at 12:05
I don't want neither overflow: hidden nor word-break: break-all. I need to make a new line when the long word "ffff..." hits the end of its ".wrap" container which shouldn't be wider than 100% (max-width:100%). But I don't want to accomplish this by "break-all" because this property crops not only long words but even short words. — David Holada, Sep 11 '18 at 13:21

Electron · Answer 1 · 2018-09-11T12:23:50.057

2

Nice and Easy - word-break: break-all;

Just add this. Nothing more nothing less :)

word-break: break-all;

See the result here:

.wrap{
  display:flex;
  overflow-wrap: break-word;
  max-width:100%;
  word-break: break-all;
}

<div class="wrap">
  <div class="a">
    a
  </div>
  <div class="b">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
  </div>
</div>

edited Sep 11 '18 at 12:23

answered Sep 11 '18 at 12:16

Electron

969
1
8
22

But break-all will break even shorter words...change "ffff" to for example "animals animals" (x100) and the end of line will look like "ani" or "anima" and so on. – David Holada Sep 11 '18 at 13:25
Yes. There is no word length variable. However, you could write some JavaScript to first count how many letters a work has, then if the condition is met, say 20 letters, it would then insert the `word-break: break-all;` style. – Electron Sep 11 '18 at 13:32
Something like this: https://stackoverflow.com/questions/20345070/if-else-conditional-based-on-character-count-jquery – Electron Sep 11 '18 at 13:54
Ok, thanks, but I need to solve this ideally without JS. I create new thread which describes my problem better https://stackoverflow.com/questions/52277368/flexbox-affects-overflow-wrap-behavior – David Holada Sep 11 '18 at 14:02

score 0 · Answer 2 · answered Sep 11 '18 at 12:09

0

Did you try to do like this?

 .wrap{
      display: flex;
      max-width: 150px;
    }

    .b{
      word-break: break-all;
    }

answered Sep 11 '18 at 12:09

Udara Kasun

2,182
18
25

Long words overflow flex container

2 Answers2

Nice and Easy - word-break: break-all;