How to do word-break in a non-rectangle div? - html

Question

My Problem
I'm working on website which has comments that look like Facebook's comments. The text and user's name in the comments can be edited dynamically.
I can't figure out how to break a long text correctly after the user's name.
What I've Tried
Using 'word-break: break-all' on my wrapper div.
Examples
What i'm trying to achieve:
What i get:
My Code (Simplified)
html:
<div class="comment_wrapper">
<div class="name"></div>
<div class="text_wrapper">
<div class="space_holder"></div>
<div class="text"></div>
</div>
</div>
relevant css:
.text_wrapper{
word-break: break-all;
}
.space_holder{
width: /*Equals to name's width + 10px. Changes dynamically with
javascript when the name is edited. */
}
Help much appreciated!
EDITED: SOLUTION
This worked for me:
html:
<div class="comment_wrapper">
<div class="name"></div>
<div class="text_wrapper">
<div class="space_holder"></div>
<div class="text"></div>
</div>
</div>
relevant css:
.text_wrapper{
word-break: break-all;
}
.space_holder{
width: /*Equals to name's width + 10px. Changes dynamically with
javascript when the name is edited. */
float: left;
}
.text{
display: inline;
}

Answer 1

If you add a float: left; to .space_holder you can wrap the floated name.
.text_wrapper {
word-break: break-all;
}
.space_holder {
width: 75px;
float: left;
}
<div class="comment_wrapper">
<div class="name"></div>
<div class="text_wrapper">
<div class="space_holder">John Doe</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>