0

When using FlexBox (FlexLayoutModule) I've stumbled across a problem I'm unable to fix.

For reference look here: https://stackblitz.com/edit/mortom-flexbox-overflow

Suppose I have some kind of chat which consists of some messages displayed below each other. Therefore the outer container has flexLayout="column".

A message consists of a name and a text which are displayed side-by-side. Each of the messages should only inhibit 75% of the container width. (not that important / if you change max-width to 100% it simply overflows the viewport in the given example).

Now, when using long words the max-width of the container gets ignored, although the css specifes overflow-wrap: break-word.

Note: the overflow-amount of the actual message text, matches the width of the name - div, so when shortening the name, the overflow gets less notable.

How can I fix this, so that the message text wraps correctly and the specified max-width for the messageContainer is the actual max-width of a message?
Feel free to ask for clarification or post links to other threads, sadly I wasn't able to find a solution or correctly apply possible solutions.

mortom123
  • 511
  • 4
  • 14

1 Answers1

0

For the content you are currently trying to break onto another line there is another css property named word-break.

You can use it like this: 

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

For a more in-depth comparison between word-break and overflow-wrap have a look here

Daniel Habenicht
  • 2,133
  • 1
  • 15
  • 36
  • Please be aware of the added info. Maybe you want to keep your css property and change the phrases you are designing against. (with real sentences your css property is working just fine) – Daniel Habenicht Nov 30 '19 at 13:34