如何使用CSS直接在“普通”文本下面编写附加文本?

像这样的事情应该可以做到:

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

这将是相当多的标记…奥亚;

<table>
<tr><td>some</td><td>text</td></tr>
<tr><td>4</td><td>5</td></tr>
</table>

您可以尝试使用列表:

<ul>
  <li>
    Some<br/>4
  </li>
  <li>
    text<br/>4
  </li>
  ....
</ul>

列表项将分别包含一个单词和下面的一个数字。长文本将包装成几行以保持结构。

虽然这个问题已经有了一个公认的答案,但可能值得考虑另一种选择。我会提前提出,这不一定是跨浏览器(我不认为IE<8会对它做很多事情)兼容的。

假设标记为:

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

下面的CSS应该近似于您试图实现的目标:

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

我没有尝试过按照你的意愿来呈现它,但只是为了以防万一你想要一个选择,只需要稍微少一点的加价(但不是很多)。当然,不要介意考虑那些只限于兼容浏览器的东西…

表可能是明智的解决方案,它将确保所有浏览器都正确对齐。您需要1)决定一行中需要多少个单词n(这决定了表中的列数),2)将要呈现的文本划分为n个单词块,然后3)用分块文本填充表中的每一行,并用统计数据填充其中的行。

编辑: 刚刚看到你的评论想让浏览器控制每行的单词。在这种情况下,我认为来自开发者艺术的<li>解决方案可能是最好的。

<div class="lefty">Some<br/>4</div>
<div class="lefty">Text<br/>10</div>

.lefty{float:left;}