Как я могу написать дополнительный текст прямо под «нормальным» текстом с помощью CSS?

Question

Я пытаюсь создать 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?

Answer 1

Что-то вроде этого должно сделать это:

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

Это будет довольно много разметки ... O_O ;;

Answer 2

Хотя на этот вопрос уже принят ответ, возможно, стоит рассмотреть альтернативу. Заранее скажу, что это не обязательно кросс-браузер (я не думаю, что IE <8, например, много с этим сделает) совместим. </p>

Предполагая разметку:

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

Я не экспериментировал с тем, чтобы представить его так, как вам хотелось бы, но на тот случай, если вам нужен альтернативный вариант, с чуть меньшей наценкой (но ненамного). И, конечно же, не против того, чтобы рассмотреть что-то, что ограничено совместимыми браузерами ...

Answer 3

Вы можете попробовать использовать списки:

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

Каждый элемент списка будет содержать слово плюс цифру ниже. Длинные тексты будут переноситься в несколько строк, сохраняя структуру.

Answer 4

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

Answer 5

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

.lefty{float:left;}

Answer 6

Таблица, вероятно, является разумным решением и гарантирует правильное выравнивание во всех браузерах. Вам необходимо 1) решить, сколько слов N вы хотите в строке (это определяет количество столбцов в вашей таблице), 2) разделить текст, который вы хотите отобразить, на N кусков слова, затем 3) заполнить каждую строку таблица с разбитым на части текстом и строки между ними со статистикой.

Редактировать: только что видел ваш комментарий, желающий позволить браузеру контролировать слова в строке. В этом случае я думаю, что

решение от Developer Art, вероятно, лучше.