如何在非矩形div中断字？

Question

我的问题

我正在一个网站上发表评论，看起来像Facebook的评论。注释中的文本和用户名可以动态编辑。

我不知道如何正确地在用户名后面打乱长文本。

我尝试过的东西

在包装器div上使用“断字：全部”。

示例

我要实现的目标：

我得到的是

我的代码（简体）

html：

<div class="comment_wrapper">
   <div class="name"></div>
   <div class="text_wrapper">
      <div class="space_holder"></div>
      <div class="text"></div>
   </div>
</div>

相关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. */
}

帮助非常感谢！

已编辑：解决方案

这对我有用：

html：

<div class="comment_wrapper">
   <div class="name"></div>
   <div class="text_wrapper">
      <div class="space_holder"></div>
      <div class="text"></div>
   </div>
</div>

相关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

如果将float: left;添加到.space_holder，则可以包装浮动名称。

.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>