Самый Простой Способ Создания Вертикального Текста с помощью CSS

Сегодня утром, мне нужно было создать вертикальный текст, для проекта, над которым я работаю. После нескольких попыток из пары идей, я зашел на Twitter, чтобы найти какие мысли есть на эту тему. Оказалось, есть отличные отзывы и идеи, которые мы рассмотрим сегодня!

Что вы об этом думаете? Есть ли у вас другие альтернативы для выполнения этой задачи, которые стоило бы рассмотреть? Многие предлагают использовать параметр поворот текста (text-rotation), чтобы выполнить эту задачу, но важно помнить, что это также поворачивает на 90 градусов весь текст, а это не то, чего мы хотим добиться.

Cпособ 1: <br> Tags

Итак, один из возможных (но не рекомендуемый) путь к достижению вертикального текста. Необходимо добавить тег <br /> после каждой буквы.

<h1>
N <br/>E <br/>T <br/>T <br/>U <br/>T <br/>S
</h1>

Не используйте этот метод. Это тупо и бессмысленно.

Способ 2: Статическое Обертывание

С помощью этого метода, мы обернем каждую букву в тег <span>, а затем установим display: block, в нашем CSS.

<style>
h1 span { display: block; }
</style>

<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U </span>
<span> T </span>
<span> S </span>
</h1>

Проблема с этим решением - это то, что это ручной процесс. Если текст генерируется динамически из CMS, вам не повезло.

Не используйте этот метод.

Способ 3: Использование JavaScript

Мой первоначальный вариант был в динамическом добавлении теги <span> с JavaScript. Таким образом, мы получаем вариант, упомянутый во втором методе.

<style>
h2 span { display: block; }
</style>
<h2> NETTUTS </h2>
<script>
var h2 = document.getElementsByTagName('h1')[0];
h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
</script>

Этот метод определенно лучше. Мы разбиваем текст в массив, а затем обворачиваем  каждую букву в «span».

Хотя лучше это решение не использовать.

Это будет нарушать ваш макет если JavaScript отключен?
В идеале, мы должны использовать CSS для этой задачи, если это возможно.

Способ 4: Применение Ширины Контейнера

Давайте уйдем от JavaScript, если мы сможем. Что, если бы мы применяли к ширине контейнера элемент, и заставил текст перескакивать. Это может работать?

<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
}
</style>

<h1> NETTUTS </h1>

В этом случае мы применяем очень узкую ширину в теге h1, а затем делаем ее равным font-size. Наконец, установив word-wrap, равной break-word, мы сможем заставить каждую букву быть на своей собственной строке. Однако, word-wrap: break-word является частью спецификации CSS3, и не совместимо во всех браузерах.

За исключением старых браузерах, это, казалось бы, решает наши проблемы...но не совсем. Слишком рискованно играть с значений пикселов.

Не рекомендуется

Способ 5: Применять letter-spacing

В качестве меры предосторожности, мы расширим четвертый способ, почему бы нам не применить letter-spacing.

<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
letter-spacing: 20px; /* Set large letter-spacing as precaution */
}
</style>

<h1> Nettuts </h1>

Кажется, проблема решена, хотя, опять же, мы используем немного CSS3 здесь.

Способ 6: Использовать ems

Кроме того, существует еще решение. Ключ в том, чтобы использовать ems и пространство между каждой буквы.

<style>
h1 {
width: 1em;
font-size: 40px;
letter-spacing: 40px;
}
</style>

<h1> N e t t u t s </h1>

И, таким образом, вы можете применять любой размер шрифта, который вы хотите. Потому что  ems равна x-высоте выбранного шрифта и нам тогда предоставлено гораздо больше гибкости.

По моим сведениям, это лучшие решение.

Способ 7: Использование white-space

<style>
h1 { white-space: pre; }
</style>

<h1>
J
E
F
F
R
E
Y
</h1>

Установив white-space, мы получаем, что текст ведет себя так, как если бы он был в теге pre.