[тест] Узнайте, как раскрутить свой сайт с нуля до 900 человек в сутки?! Пройти тест
Лого www.SiteHere.ru

Простые способы создать вертикальный текст на 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 комментария к записи
  • ZeroXor

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

     
    • Ann

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

       

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

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