Как заставить текст работать сверху вниз в CSS?

Кто-нибудь знает, как выровнять текст сверху вниз в div.

ТАК даже не позволит мне продемонстрировать это. . . Я просто хочу, чтобы буквы складывались друг на друга вертикальной линией вниз по странице, как истории здания. Я надеялся, что мне не нужно делать это с изображением.


vertical-alignment css text-alignment
person Kenneth Johns    schedule 04.02.2009    source источник

Ответы (5)


arrow_upward
33
arrow_downward

Размещение текста по вертикальным линиям БЕЗ ХАКОВ

writing-mode

Атрибут CSS writing-mode позволяет тексту размещаться вертикально.

.traditional-vertical-writing
{
  writing-mode: vertical-rl;
}
<p class="traditional-vertical-writing">
  This text runs vertically.<br>
  『只是』 （(but the thing is)），since Latin alphabets are not for vertical writing,
  not only the lines but each of the non-vertical-writing letters also gets rotated.<br>
  0123456789
</p>

text-orientation

Если вы не хотите, чтобы буквы, написанные не вертикально, вращались по вертикали, вы можете использовать также text-orientation атрибут CSS.

.vertical-writing
{
  writing-mode: vertical-rl;
  text-orientation: upright;
}
<p class="vertical-writing">
  This text runs vertically.<br>
  『それに』 （(and in addition)）、now you don't have to turn your head 90 degrees clockwise
  to read these non-vertical-writing letters!<br>
  0123456789
</p>

И если вы собираетесь сделать татэ-чу-йоко [1] [ 2] [3] (a немного горизонтального письма при вертикальном письме),

рассмотрите возможность использования text-combine-upright.

person Константин Ван    schedule 02.12.2018
comment
Для как перевернуть столбцы так, чтобы первая буква отображалась слева; Я не знаю. Прокомментируйте это, если вы знаете, как это сделать. - person Константин Ван; 20.11.2020
comment
Используйте vertical-lr вместо vertical-rl, чтобы иметь столбцы от л левого до правого левого. - person Δασρακελ; 02.02.2021

arrow_upward
13
arrow_downward

Чтобы буквы располагались сверху вниз, сохраняя при этом их нормальную ориентацию, например:

F

O

O

HTML:

<div class="toptobottom">letters</div>

CSS:

.toptobottom{
  width: 0;
  word-wrap: break-word;
}

word-wrap позволяет разбивать слова посередине, так что буквы будут сверху вниз. Он также действительно хорошо поддерживается: https://developer.mozilla.org/en-US/docs/CSS/word-wrap.

person NJCodeMonkey    schedule 12.04.2013
comment
Спасибо за это! Я обнаружил, что разработка японских веб-сайтов всегда возвращает нас к основам. - person Gregordy; 02.02.2017

arrow_upward
5
arrow_downward

HTML:

<div class="bottomtotop">Hello!</div>

CSS:

.bottomtotop { transform:rotate(270deg); }
person Berker Yüceer    schedule 05.09.2012
comment
использование свойства transform позволит вашему тексту вытекать из вашего контейнера - person Amit Kumar Gupta; 09.05.2014
comment
Это изменение ориентации букв, о чем не идет речь. - person Danish Adeel; 22.06.2018

arrow_upward
0
arrow_downward

В зависимости от размера шрифта отрегулируйте соответственно:

<div style='width:12px'>a b c d</div>
person Diodeus - James MacFarlane    schedule 04.02.2009

arrow_upward
0
arrow_downward

Ответ NJCodeMonkey был близок.

Мне пришлось использовать word-break. Это немного отличается от word-wrap:break-word;

Вот так бы это выглядело.

HTML:

<div class="VerticalText">LongTextWithNoSpaces</div>

CSS:

.VerticalText
{
   width: 1px;
   word-break: break-all;
}

У меня это сработало в Firefox 24, IE 8 и IE 11.

person Dan    schedule 04.09.2014