Geek Answers Handbook

How do you backtrack from subsequent lines of text using <span>

I am working on applying CSS in a web chat application.

Below is the current situation and what I would ideally like to do.

problem and the goal

The HTML I have to work with is pretty simple, and there are 3 elements that I need to work with, the “time”, “nickname” message.

Here's how each chat line is created:

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

This is certainly not the most pragmatic HTML, and I believe that the best solution would be to wrap each row in a table, where “time” will be a column, and “nick” and “message” in another column. But I'm curious if this can be done using CSS and HTML, which I need to work with right now. I closed when each range has a "display: table-cell" ... for example.

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

almost


but .. the message is wrapped according to the message, and I would like it to be wrapped under an alias. Any CSS cheat ideas that will create the effect I'm looking for?

Thanks!

+7
source share
2 answers

Here is a widthout solution modifying your HTML structure:

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>
+1
source

Use this html structure instead of the current one.

  .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>
0
source

More articles:


All Articles