如何使用<span>缩进后续文本行

Question

我正在努力将CSS应用于朋友的网络聊天室应用程序.

下面代表了当前的情况,以及我理想的情况.

我必须使用的HTML非常简单,我必须使用3个元素,'time''昵称''message'.

这就是每个聊天行的产生方式:

<div><span id="time">10:00</span><span id="nickname">tom</span><span id="message">message</span></div>

这绝对不是最实用的HTML,我认为更好的解决方案是将每一行包装在一个表中,其中'time'将是一列,'nickname'和'message'将在另一列中.但我很好奇这种事情是否可以纯粹用CSS和我现在必须使用的HTML来完成.我已经接近每个跨度都有"display:table-cell"......例如

<div><span id="time" display:table-cell>10:00</span><span id="nickname" display:table-cell>tom</span><span id="message" display:table-cell>message</span></div>

但是..消息包装与消息对齐,我希望它包含在昵称下面.任何css技巧想法会产生我正在寻找的效果？

谢谢!

Answer 1

这是一个改变 HTML 结构的宽度解决方案：

演示

CSS：

.messageContainer {
    display: table;
    table-layout:fixed;
}
.time {
    display:table-cell;
    width:70px;
    vertical-align:top;
}
.nickname {
    display:table-cell;
    width:70px;
    vertical-align:top;
}
.message {
    display:inline-block;
    text-indent:70px;
    margin-left:-70px;
}

HTML：

<div class="messageContainer">
    <span class="time">10:00</span>
    <span class="nickname">Tom:</span>
    <span class="message">test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message </span>
</div>