Html text vertical spacing

CSS Rotate Text Vertical — Extra Space on both sides

When I rotate and inline layer with TEXT, it adds extra space (width of large text) on the rotation, I dont want to fix. What is the best way to avoid extra space (width of element) on both sides when rotating with CSS. Below is my Code:

.rotate < display: inline-block; white-space: nowrap; transform: translate(0, 100%) rotate(-90deg); transform-origin: 0 0; vertical-align: bottom; >.rotate:before < content: ""; float: left; margin-top: 100%; >.rotate:after

 
BACKGROUND TITLE 
 Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

4 Answers 4

transforms are entirely visual. they do NOT affect the layout of elements. Space is not being added. it’s there all the time.

Consider using writing-mode instead.

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

Writing-mode @ MDN

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

 
BACKGROUND TITLE 
 Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

or transform:rotate(-90deg) (which was your first choice), but with a pseudo to reset height according to text-length. (this requires to use rgba() colors and set both line of text in a single container. https://codepen.io/gc-nomade/pen/RLQLJG?editors=1100

.rotate < width:110px; >.rotate>span < display:inline-block; transform:rotate(-90deg) >.rotate > span:before < content:''; padding-top:100%; float:left; >body

  
BACKGROUND 
TITLE 
 Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

Both technics here, requires to set a width to the rotating text container and are build from a flex container. It should work in IE,FF,Chrome. ( display:table/table-cell can be another display option for older browser)

Источник

CSS Text Spacing

In this chapter you will learn about the following properties:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

Example

Line Height

The line-height property is used to specify the space between lines:

Example

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

Example

White Space

The white-space property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element:

Example

The CSS Text Spacing Properties

Property	Description
letter-spacing	Specifies the space between characters in a text
line-height	Specifies the line height
text-indent	Specifies the indentation of the first line in a text-block
white-space	Specifies how to handle white-space inside an element
word-spacing	Specifies the space between words in a text

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS Интервал текста

CSS Отступ текста, интервал между буквами, высота строки, интервал между словами и пробел

В этой главе вы узнаете о следующих свойствах:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

Отступ текста

Свойство text-indent используется для указания отступа первой строки текста:

Пример

Интервал между буквами

Свойство letter-spacing используется для указания пробела между символами в тексте.

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

Пример

Высота линии

Свойство line-height используется для указания пробела между строками:

Пример

Интервал между словами

Свойство word-spacing используется для указания пробела между словами в тексте.

Следующий пример демонстрирует, как увеличить или уменьшить интервал между словами:

Пример

Пустое пространство

Свойство white-space определяет, как обрабатывается пробел внутри элемента.

В этом примере показано, как отключить перенос текста внутри элемента:

Пример

CSS Свойства интервала между текстом

Свойство	Описание
letter-spacing	Задает интервал между символами в тексте
line-height	Задает высоту строки
text-indent	Задает отступ первой строки в текстовом блоке
white-space	Указывает, как обрабатывать пробелы внутри элемента
word-spacing	Задает интервал между словами в тексте

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник