Question

我有以下问题：

当我写的文字是DIV的长篇大论时，它会在不愉快的地方打破，我该怎样设置它在哪里打破？

长文：测试：你好我的名字是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

Answer 1

您可以使用浮动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上的All About Floats。

http://jsfiddle.net/eezpzj0L/

Answer 2

有很多方法可以做到这一点......也许最干净的方法之一就是通过css table和table-cell。这将完美地放置您的元素。

使您的包装器div display: table和您的跨度display: table-cell。（别忘了把你的＆＃34;：＆＃34;放在一个范围内，以获得更好的视觉效果）

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

CSS：

.wrapper {
    display: table;
}

.wrapper span {
    display: table-cell;
}

http://jsfiddle.net/jy7d431p/1/ - 调整屏幕大小并查看或设置最后一个跨度的宽度......

自动打破文本，用户名背后的理由？

2 个答案: