css - How do you indent subsequent lines of text using

Question

I'm working on applying CSS to a friend's web chatroom application.

Below represents the current situation, and what I'd ideally like to happen.

The HTML I have to work with is pretty simple, and there's 3 elements I have to work with, 'time' 'nickname' 'message' .

This is how each line of chat is produced:

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

This is definitely not the most pragmatic HTML, and I think a better solution would be to wrap each line in a table, where 'time' would be a column and 'nickname' and 'message' would be in another column. But I'm curious if this sort of thing could be accomplished purely with CSS and the HTML I have to work with right now. I've gotten close by having each span have "display:table-cell"..e.g.

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

but.. the message wraps aligned to the message, and I'd like for it to wrap underneath the nickname. Any css trickery ideas that will produces the effect I'm looking for?

Thanks!

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>

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>