代码之家 › 专栏 › 技术社区 › René Nyffenegger

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

css

René Nyffenegger · 技术社区 · 14 年前

我正在尝试创建一个HTML文档,它应该看起来像

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

我试过类似的东西

<span>Some<br>4</span>
<span>text<br>4</span>...

和

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

这两个都没有给我期望的结果。

那么,我可以用CSS解决这个问题吗?

6 回复 | 直到 14 年前

deceze 14 年前

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

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

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

Konrad Garus 14 年前

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

user151323 14 年前

您可以尝试使用列表:

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

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

David Thomas 14 年前

虽然这个问题已经有了一个公认的答案,但可能值得考虑另一种选择。我会提前提出,这不一定是跨浏览器(我不认为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; }

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

Richard H 14 年前

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

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

casraf 14 年前

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

.lefty{float:left;}