如何在非矩形div中进行单词换行？

Question

我的问题

我正在制作一个网站，其中的评论看起来像Facebook的评论。评论中的文本和用户名可以动态编辑。

我无法弄清楚如何在用户名称后面正确地断开长文本。

我尝试过的方法

在我的包装

上使用 'word-break: break-all'。

示例

我想要实现的效果：

我得到的效果：

我的代码（简化版）

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;
}

- Lotem Nadir

---

https://techwelkin.com/wrap-text-around-a-div-element - ZorgoZ

Answer 1

如果您在 .space_holder 中添加 float: left;，则可以将浮动名称包装起来。

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

- brooksrelyt

---

谢谢，好使了！我还得把我的“文本”显示更改为内联。我会编辑我的答案并附上解决方案。 - Lotem Nadir