Html 如何在非矩形div中进行分词？ 我的问题

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

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

我试过的 在我的包装器div上使用“wordbreak:breakall”

例子 我正在努力实现的目标：

我得到的是：

我的代码（简化） html:

相关css：

.text\u包装器{
单词break：打破一切；
}
.太空舱{
宽度：/*等于名称的宽度+10px。随
编辑名称时使用javascript*/
}

非常感谢您的帮助

编辑：解决方案 这对我很有用：

html:

相关css：

.text\u包装器{
单词break：打破一切；
}
.太空舱{
宽度：/*等于名称的宽度+10px。随
编辑名称时使用javascript*/
浮动：左；
}
.文本{
显示：内联；
}

如果添加

浮动：左

到

.space\u holder

您可以包装浮动名称

.text\u包装器{
单词break：打破一切；
}
.太空舱{
宽度：75px；
浮动：左；
}

无名氏
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。

谢谢，这很有效！我还必须将“文本”显示改为内联显示。我将用解决方案编辑我的答案。