How to achieve flex-end justify with line break in paragraph? - css

Question

I have a paragraph with a style like this:
<p style={{display:'flex', justifyContent:'flex-end'}}>{props.message}</p>
The following with mutliple lines looks like this:
As you can see it starts from right to left with small message, but if I have more text I want to achieve multiple lines like at the first message. How can I do that? Thanks in advance.
Edit: I tried all of the SO answers in wrapping but they didn't work.
With this same result:
<p style={{display:'flex',flexDirection:'row', flexWrap:'wrap-reverse', justifyContent:'flex-end'}}>{props.message}</p>

Answer 1

You can try setting a max-width on the element that contains the text.
p {
max-width: 45ch;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>