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

Question

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

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

Answer 1

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

F

O

O

HTML:

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

CSS:

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

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

Answer 2

Html:

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

Css:

.bottomtotop { transform:rotate(270deg); }

Answer 3

Ваш текст будет проходить по вертикальным линиям БЕЗ ХАКСОВ

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

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

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

Answer 4

Ответ 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.

Answer 5

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

<div style='width:12px'>a b c d</div>