如何使用<span> </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

这是一个解决方案 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>

Answer 2

使用此html结构而不是您当前的结构。

  .time { padding-left:10px; width:40px;margin-top:0px;}
  .nickname { margin-left: 50px;margin-top:-20px;width:147px;}
  #chatTable { width:200px;}

    <div id="chatTable">
             <div>
                   <div class="time">10:00</div>
                   <div class="nickname">tom:
                        <span class="message">message ffffff fffffffffff fffffffff ffffffff fffffff</span>
                   </div>
             </div>
             <div>
                   <div class="time">10:01</div>
                   <div class="nickname">Mike:
                        <span class="message">message2</span>
                   </div>  
             </div>
    </div>