Есть ли способ вертикального выравнивания текста в HTML? - PullRequest
Новая
       19

Есть ли способ вертикального выравнивания текста в HTML?

2 голосов
/ 08 февраля 2012

В настоящее время я отображаю текст в таблице HTML, которая состоит из одной большой строки и двух столбцов.Я использую таблицу, чтобы использовать преимущества аспекта бок о бок (я мог бы переключиться на плавающие дивы, если кто-то может сказать мне преимущество в этом).Я заполняю текст в левой части, а затем заполняю в правой части.ОЧЕНЬ важно, чтобы обе стороны выглядели так же далеко, как и распространение текста сверху вниз.

Содержание для каждой стороны фиксировано (от БД), и правая сторона в большинстве случаев короткая.Подобно тому, как выравнивание текста расставляет слова по размеру строки, есть ли способ вертикального выравнивания строк в правом столбце, чтобы убедиться, что есть текст сверху вниз?

Я искал каксумасшедший и не повезло.

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

enter image description here

Ответы [ 2 ]

4 голосов
/ 08 февраля 2012

Предполагая, что UIWebView поддерживает его ( Mobile Safari начиная с iOS 3.2 ), вы можете использовать -webkit-column свойства CSS.

Они передают содержимоеэлемента HTML на столько столбцов, сколько вы укажете, и поместите в каждый столбец как можно больше текста.Они также позволяют вам указывать правила (например, границы) и промежутки между столбцами, которые бы подходили вашему дизайну.

Это означало бы, что вам больше не придется разбивать содержимое самостоятельно.

HTML 

<div class="text"><p>I am currently displaying text in an HTML table that is simply one large row and two columns...</div>

<div class="references">If "Side by Side" is your main criterion for choosing a table with just two columns...</div>

CSS 

.text {
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -webkit-column-rule: solid 1px #999;
}

.references {
    padding: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-rule: solid 1px #999;
    border-top: solid 1px #999;
}
0 голосов
/ 08 февраля 2012

Если вы задаете этот вопрос, потому что хотите использовать его для iBook, тогда используйте iBook Author в Mac App Store , это бесплатно.

В качестве альтернативы вы можете создатьтаблицу с 3 столбцами, первые 2 можно добавить colspan=2.Это создаст 2 верхних столбца, а остальные останутся на месте в виде 3 столбцов.

...