Javascript 自动断开文本，在用户名后面对齐？

我有以下问题：

当我写的文本是为了长DIV，它在不愉快的地方断开，我如何设置它在哪里断开

长文本：Test:Hello我的名字是Tim4497

但它在“测试”后会断裂，所以看起来如下所示：

测试：

你好，我叫Ti

你知道如何使它看起来像：

测试：你好，我的名字

是Tim4497。

断线后，它必须在“测试：”后对齐

此外，如果它打断为多行，则行间距必须相同

到目前为止，这是我所拥有的，但没有达到我想要的

HTML代码：

<div>
 <span class="user_name" style="color:#FF7000">Test</span>
 ": "
 <span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>

试验
": "
你好，我叫蒂姆，我的英语很糟糕。

如何用JS或Html/CSS解决这个问题

谢谢:),

---

tim4497

您可以使用浮动DIV来实现如下效果：

<div style="width: 200px; background: blue;">
    <div style="float:left; background: red;">Name:</div>
    <div style="float:left; text-align: justify; background: green; width: 100px;">Some extremely long text would go in here that should wrap around several times and be flush with the first and last charcters.</div>
    <div style="clear: both;"></div>
</div>

姓名：
一些非常长的文本将放在这里，它们应该环绕几次，并与第一个和最后一个字符齐平。

不过，如果你对浮动不太了解，它可能是一个复杂的话题。请参阅css-tricks.com

---

有很多方法可以做到这一点。。。也许最干净的方法之一是通过css

table

和

table cell

。这将完美地将元素并排放置

使包装器div a

display:table

和span

display:table单元格

。（别忘了将“：”也放在跨度内，以获得更好的视觉效果）

---

-调整屏幕大小，然后查看，或将宽度设置为最后一个跨度…

例如，请参见右侧的相关->数字是用户名，标题是文本消息您根本不清楚要问什么，发布的代码不会重现文本中描述的问题。除非你有一些代码，否则文本不会被任意剪切。非常感谢你，我爱你：我添加了：。用户_消息{text align:justify}就像JDB所说的，它是完美的！！谢谢谢谢你也谢谢你，请看LcSalazar的评论，这篇文章是完成他的想法的提示：）

<div class="wrapper">
     <span class="user_name" style="color:#FF7000">Test</span>
     <span>:</span>
     <span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>

.wrapper {
    display: table;
}

.wrapper span {
    display: table-cell;
}