I am trying to create an HTML document that should look something like
Some text that spans multiple rows
4 4 4 5 8 4
but that has some statistical information
3 4 3 4 11 12
beneath almost every word
7 6 5 4
I have tried something like
<span>Some<br>4</span>
<span>text<br>4</span>...
and
<style>
table {display:inline}
</style>
...
<table><tr><td>some</td><td>4</td></tr></table>
<table><开发者_开发知识库;tr><td>text</td><td>4</td></tr></table>
both of which didn't give me the desired result.
So, can I solve this problem with CSS?
Something like this should do it:
<p>
<span>Foo<span class="stat">3</span></span>
<span>Bar<span class="stat">3</span></span>
</p>
p {
line-height: 2em;
}
span {
position: relative;
}
span.stat {
position: absolute;
left: 0;
top: 1em;
}
That's going to be quite a lot of markup... O_O;;
<table>
<tr><td>some</td><td>text</td></tr>
<tr><td>4</td><td>5</td></tr>
</table>
You could try using lists:
<ul>
<li>
Some<br/>4
</li>
<li>
text<br/>4
</li>
....
</ul>
The list items will each contain a word plus a digit below. Long texts will wrap to several lines keeping the structure.
While this question already has an accepted answer, it might be worth considering an alternative. I will offer, in advance, that this isn't necessarily cross browser (I don't imagine that IE < 8 will do much with it for example) compatible.
Assuming the markup of:
<p class="statisticText"><span title="4">Some</span> <span title="5">text</span> <span title="2">with</span> <span title="1">associated</span> <span title="1">information</span>.</p>
The following css should approximate what you're trying to achieve:
p.statisticText {line-height: 2em; }
p.statisticText span {position: relative; top: -0.75em; }
p.statisticText span:before {content: attr(title); position: absolute; top: 1em; left: 0; }
I've not experimented to present it as you'd like, but just in case you'd like an alternative option, with a little less mark-up (but not by much). And, of course, don't mind considering something that's restricted to compliant browsers...
A table is probably the sensible solution, and will guarantee correct alignment in all browsers. You need to 1) decide how many words N you want on a line (this determines the number of columns in your table), 2) divide up the text you want to render into N word chunks, then 3) Populate every other row in the table with the chunked text, and the rows in between with the stats.
Edit: just seen your comment re wanting to let the browser control words per line. In that case i think the <li> solution from Developer Art is probably best.
<div class="lefty">Some<br/>4</div>
<div class="lefty">Text<br/>10</div>
.lefty{float:left;}
精彩评论