如何使用flex属性使文本停止在每个空格的下一行？

Question

 .span { flex-basis: 100%; } #outerSender { width: 100%; padding: 0 0 0 40%; } #sender { /*flex-grow: 1;*/ max-width: 400px; color: white; margin: 2px 0 0 2px; display: flex; border: 1px solid #99CC66; overflow-wrap: break-word; font-size: 15px; } #innerSender { width: 100%; flex-grow: 1; right: 0; flex-shrink: 0; flex-basis: 0; padding: 8px; background-color: #009900; border: 1px solid #99CC66; border-radius: 15px; } 

 <div id="outerSender"> <div id="sender"><span class="span"></span> <div id="innerSender">fe wef wef ew wef</div> </div> </div> 

I am trying to use the flex property but the problem is that on every space between the text , it goes to new line.

How can I stop this?

Answer 1

To right align the flex items, use justify-content: flex-end .

This won't work alone in your case, as your span is told to take full width, hence will push the div as far to the right as possible, and force line wrap.

One solution to that is to allow for the flex items to wrap, using flex-wrap: wrap

Stack snippet

 .span { flex-basis: 100%; } #outerSender { width: 100%; padding: 0 0 0 40%; } #sender { /*flex-grow: 1;*/ max-width: 400px; color: white; margin: 2px 0 0 2px; display: flex; flex-wrap: wrap; /* added */ border: 1px solid #99CC66; overflow-wrap: break-word; font-size: 15px; justify-content: flex-end; /* added */ } #innerSender { padding: 8px; background-color: #009900; border: 1px solid #99CC66; border-radius: 15px; } 

 <div id="outerSender"> <div id="sender"> <span class="span"></span> <div id="innerSender">fe wef wef ew wef</div> </div> </div> <div id="outerSender"> <div id="sender"> <span class="span"></span> <div id="innerSender">fe wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef</div> </div> </div> 

---

And if the span were there to accomplish the same, just remove it instead of using flex-wrap

Stack snippet

 #outerSender { width: 100%; padding: 0 0 0 40%; } #sender { /*flex-grow: 1;*/ max-width: 400px; color: white; margin: 2px 0 0 2px; display: flex; border: 1px solid #99CC66; overflow-wrap: break-word; font-size: 15px; justify-content: flex-end; /* added */ } #innerSender { padding: 8px; background-color: #009900; border: 1px solid #99CC66; border-radius: 15px; } 

 <div id="outerSender"> <div id="sender"> <div id="innerSender">fe wef wef ew wef</div> </div> </div> <div id="outerSender"> <div id="sender"> <div id="innerSender">fe wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef</div> </div> </div>