Exore LTD » CSS3 » Простые способы создать вертикальный текст на CSS
Лого SiteHere.ru

Ноябрь 29, 2015 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Простые способы создать вертикальный текст на CSS

Простые способы создать вертикальный текст на CSS

Очень часто при разработке дизайна сайта необходимо использовать вертикальный текст. Первое что приходит в голову это сделать текст в графическом редакторе, а затем изображения вставить на сайт. Но является ли данный способ самым оптимальным? В связи с этим я решил рассмотреть другие способы создания вертикального текста на CSS без использования изображений.

Рассмотрим как способами можно создать вертикальный текст ниже…



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

Один из самых простых способ создать вертикальный текст на странице это использовать тег <br>.

1
2
3

    <h1>
        s <br> i <br> t <br> e <br> h <br> e <br> r <br> e <br> . <br> r <br> u
    </h1>

Посмотреть пример



2 Метод: Статический блок

Всё что нам необходимо сделать это заключить каждую букву в тег <span> и прописать в CSS свойству display значение block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>Статический блок</title>  
 
        <style>  
            h1 span { display: block; }  
        </style>  
    </head>  
    <body>   
        <h1>  
            <span> s </span>  
            <span> i </span>  
            <span> t </span>  
            <span> e </span>  
            <span> h </span>  
            <span> e </span>  
            <span> r </span>  
            <span> e </span>  
            <span> . </span>
            <span> r </span>
            <span> u </span>
        </h1>  
    </body>  
</html>

Посмотреть пример



3 Метод: Использование JavaScript

Отличие от предыдущего в том, что не надо прописать тег <span> каждой букве, а будем добавлять динамически с помощью JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>Статический блок Javascript</title>  
 
        <style>  
            h1 span { display: block; }  
        </style>  
    </head>  
    <body>   
        <h1>  
           sitehere.ru
        </h1>  
        <script>  
            var h1 = document.getElementsByTagName('h1')[0];  
            h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';  
        </script> 
    </body>  
</html>

Посмотреть пример



4 Метод: Ширина контейнера

Также вертикальный текст можно сделать задав свойству width контейнера, в котором находится текст, маленькую ширину:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>Ширина контейнера</title>  
 
        <style>  
            h1 {  
              width: 25px;  
              font-size: 50px;  
              word-wrap: break-word;  
           }  
        </style>  
    </head>  
    <body>   
        <h1>  
           sitehere.ru
        </h1>  
    </body>  
</html>

Посмотреть пример



5 Метод: CSS свойство whitespace

И последний способ, который мы сегодня рассмотрим, это использование свойства whitespace в CSS. Данное свойство делает почти то же что и тег <pre> за исключением того что не меняет шрифт текста на моноширинный. Вот как выглядит страница в этом случае:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>Whitespace</title>  
 
        <style>  
            h1 { white-space: pre; }
        </style>  
    </head>  
    <body>   
        <h1>  
           s
           i
           t
           e
           h
           e
           r
           e
           .
           r
           u
        </h1>  
    </body>  
</html>

Посмотреть пример



Вывод

Также можно использовать тег <pre> и делать аналогично с последним методом.


Успехов!

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

2 комментария к записи
  • ZeroXor

    Как по мне — лучше использовать 4-й способ, ведь в этом случае остальное пространство страницы можно использовать для другого контента (в отличии от 5-го способа… или нет? уже сомневаюсь). Остальные же — слишком громоздки.

     
    Ответить
    • Ann

      Вот способ перевернуть текст, влияющий на поток: перейти.

       
      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *