css - 如何使用 缩进后续文本行

Question

我正在努力将 CSS 应用到 friend 的网络聊天室应用程序中。

下面代表当前情况，以及我希望发生的情况。

我必须使用的 HTML 非常简单，我必须使用 3 个元素，'time' 'nickname' 'message' 。

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

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

这绝对不是最实用的 HTML，我认为更好的解决方案是将每一行包装在一个表格中，其中“时间”是一列，“昵称”和“消息”是另一列。但我很好奇这种事情是否可以纯粹使用 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

这是一个widthout更改您的 HTML 结构的解决方案:

Demo

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>