Вертикальний текст на css

Дуже часто при розробці дизайну сайту необхідно використовувати вертикальний текст. Перше що приходить в голову це зробити текст в графічному редакторі, а потім зображення вставити на сайт. Але чи є даний спосіб найоптимальнішим? У зв`язку з цим я вирішив розглянути інші способи створення вертикального тексту на CSS без використання зображень.

Розглянемо як способами можна створити вертикальний текст нижче ...

1 Метод: тег

Один з найпростіших спосіб створити вертикальний текст на сторінці це використовувати тег.

123	lt;h1gt; s lt;brgt; i lt;brgt; t lt;brgt; e lt;brgt; h lt;brgt; e lt;brgt; r lt;brgt; e lt;brgt; . lt;brgt; r lt;brgt; ult;/h1gt;

Відео: Вертикальне вирівнювання на CSS

Подивитися приклад

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

Все що нам необхідно зробити це укласти кожну букву в тег і прописати в CSS властивості display значення block.

1234567891011121314151617181920212223242526

lt;htmlgt;lt;headgt;lt;meta charset="Utf-8"gt;lt;titlegt; Статичний блокlt;/titlegt;lt;stylegt; h1 span {display: block-}lt;/stylegt;lt;/headgt;lt;bodygt;lt;h1gt;lt;spangt; s lt;/spangt;lt;spangt; i lt;/spangt;lt;spangt; t lt;/spangt;lt;spangt; e lt;/spangt;lt;spangt; h lt;/spangt;lt;spangt; e lt;/spangt;lt;spangt; r lt;/spangt;lt;spangt; e lt;/spangt;lt;spangt; . lt;/spangt;lt;spangt; r lt;/spangt;lt;spangt; u lt;/spangt;lt;/h1gt;lt;/bodygt;lt;/htmlgt;

Подивитися приклад

3 Метод: Використання javascript

Відмінність від попереднього в тому, що не треба прописати тег кожній букві, а будемо додавати динамічно за допомогою javascript:

1234567891011121314151617181920

lt;htmlgt;lt;headgt;lt;meta charset="Utf-8"gt;lt;titlegt; Статичний блок javascriptlt;/titlegt;lt;stylegt; h1 span {display: block-}lt;/stylegt;lt;/headgt;lt;bodygt;lt;h1gt; sitehere.rult;/h1gt;lt;scriptgt; var h1 = document.getElementsByTagName ( `h1`) [0] -h1.innerHTML = `lt;spangt; ` + H1.innerHTML.split ( ``). Join ( `lt;/spangt; lt;spangt; `) +`lt;/spangt; `-lt;/scriptgt;lt;/bodygt;lt;/htmlgt;

Відео: Вертикальне і горизонтальне вирівнювання на CSS. повне керівництво

Подивитися приклад

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

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

1234567891011121314151617181920

lt;htmlgt;lt;headgt;lt;meta charset="Utf-8"gt;lt;titlegt; Ширина контейнериlt;/titlegt;lt;stylegt; h1 {width: 25px; font-size: 50px; word-wrap: break-word-}lt;/stylegt;lt;/headgt;lt;bodygt;lt;h1gt; sitehere.rult;/h1gt;lt;/bodygt;lt;/htmlgt;

Відео: Як зробити вертикальний текст в Word

Подивитися приклад

5 Метод: CSS властивість whitespace

І останній спосіб, який ми сьогодні розглянемо, це використання властивості whitespace в CSS. Дана властивість робить майже те ж що і тег

за винятком того що не змінює шрифт тексту на моно. Ось як виглядає сторінка в цьому випадку:

1234567891011121314151617181920212223242526

lt;htmlgt;lt;headgt;lt;meta charset="Utf-8"gt;lt;titlegt; Whitespacelt;/titlegt;lt;stylegt; h1 {white-space: pre-}lt;/stylegt;lt;/headgt;lt;bodygt;lt;h1gt; sitehere.rult;/h1gt;lt;/bodygt;lt;/htmlgt;