Статьи

Самый простой способ создать вертикальный текст с помощью CSS

Февраль 25, 2019

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

* Примечание — пожалуйста, обратитесь к «Способу 6» ниже для более подробной информации о правильном использовании.

Подпишитесь на нашу страницу YouTube, чтобы посмотреть все видеоуроки!
Предпочитаете смотреть это видео на Screenr ?

Метод 1 : <br> Теги

Таким образом, один из возможных (хотя и не рекомендуемых) способов получения вертикального текста — добавить теги <br> после каждой буквы.

1
2
3
<h1>
   N <br />E <br />T <br />T <br />U <br />T <br />S
</h1>
Посмотреть демо

Не используйте этот метод. Это хромое и неаккуратное.

Метод 2 : статическая упаковка

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
 
<style>
  h1 span { display: block;
</style>
</head>
<body>
  
  <h1>
   <span> N
   <span> E
   <span> T
   <span> T
   <span> U
   <span> T
   <span> S
  </h1>
   
</body>
</html>
Посмотреть демо

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

Способ 3 : использовать JavaScript

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
 
<style>
  h1 span { display: block;
</style>
</head>
<body>
  <h1> NETTUTS </h1>
   
  <script>
    var h1 = document.getElementsByTagName(‘h1’)[0];
    h1.innerHTML = ‘<span>’ + h1.innerHTML.split(»).join(‘
  </script>
</body>
</html>
Посмотреть демо

Этот метод определенно является улучшением. Выше мы split текст на массив, а затем заключаем каждую букву в span . Хотя мы могли бы использовать что-то вроде оператора for или $.map для фильтрации массива, гораздо лучшим и более быстрым решением будет одновременное объединение и перенос текста вручную.

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

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

Способ 4 : применить ширину к контейнеру

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
 
<style>
  h1 {
    width: 50px;
    font-size: 50px;
    word-wrap: break-word;
  }
</style>
</head>
<body>
  <h1> NETTUTS </h1>
</body>
</html>
Посмотреть демо

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

За исключением старых браузеров, это, похоже, решает нашу проблему … но не полностью. Демонстрация выше, кажется, работает, но слишком рискованно играть со значениями пикселей. Давайте попробуем что-нибудь простое, например превратить заглавные буквы в строчные.

Сломан снова

Хлоп; с этим методом мы должны быть очень осторожны, когда дело доходит до конкретных значений, которые мы устанавливаем. Не рекомендуется.

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
 
<style>
  h1 {
    width: 50px;
    font-size: 50px;
    word-wrap: break-word;
    letter-spacing: 20px;
  }
</style>
</head>
<body>
  <h1> Nettuts </h1>
</body>
</html>
Посмотреть демо

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

Способ 6 : использовать em

В качестве альтернативы, есть решение с одним вкладышем. Помните, когда мы узнали, что применение overflow: hidden к родительскому элементу чудесным образом заставит его содержать свои плавающие элементы? Этот метод вроде как! Ключ должен использовать em и ставить пробел между каждой буквой.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
 
<style>
  h1 {
    width: 1em;
    font-size: 40px;
    letter-spacing: 40px;
  }
</style>
</head>
<body>
  <h1> N ettuts </h1>
</body>
</html>
Посмотреть демо

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

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

Насколько мне известно, на данный момент это лучшее, наиболее совместимое с браузерами решение.

Способ 7 : Whitespace

Последний способ достичь этого эффекта — воспользоваться свойством white-space .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html lang=»en»>
   <head>
      <meta charset=»UTF-8″>
      <title></title>
      <style>
         h1 { white-space: pre;
      </style>
   </head>
   <body>
 
      <h1>
         JEFFREY
      </h1>
   </body>
</html>
Посмотреть демо

Если для white-space задать значение pre , то текст будет вести себя так, как если бы он был внутри тега pre . Таким образом, он учитывает любой интервал, который вы добавили.

Вывод

Разве не должно быть правила CSS3 для выполнения этой задачи? Что если бы я мог установить что-то вроде: font-display: letter-block; Который будет инструктировать каждую букву как блок?

Как вы думаете? У вас есть другие альтернативы, которые мы должны рассмотреть? Многие люди предлагали использовать вращение текста для выполнения этой задачи, но важно помнить, что это также поворачивает текст на девяносто градусов, а это не то, чего мы пытаемся достичь.

37
Share: