# Оформление вывода текста в CSS

## Режим вывода

`pre` `white-space`

Выведите на экран какой-нибудь текст так, чтобы переносы и отступы в нем стояли так, как это сделано в редакторе кода.

Сделайте див шириной `200px`. Сделайте так, чтобы текст в этом диве не переходил на новую строку. Добавьте в див длинный текст, который не будет помещаться по ширине в этот блок. Проверьте то, что текст вылезет с правой части блока.

Напишите код, который продемонстрирует разницу между значениями `pre`, `pre-wrap` и `pre-line`.

## Размер таба

`tab-size`

Выведите на экран какой-нибудь код так, чтобы переносы и отступы в нем стояли так, как это сделано в редакторе кода.

Модифицируйте предыдущую задачу так, чтобы табуляция соответствовала четырем пробелам.

Модифицируйте предыдущую задачу так, чтобы табуляция соответствовала двум пробелам.

## Переполнение блока

`overflow` `overflow-x` `overflow-y`

Сделайте див шириной и высотой в `200px`. Добавьте в него длинный текст, который не будет помещаться по высоте в этот блок. Проверьте то, что текст вылезет с нижней части блока.

Модифицируйте предыдущую задачу так, чтобы в диве при вылезании текста по высоте появлялась вертикальная полоса прокрутки.

Модифицируйте предыдущую задачу так, чтобы вылезающий по вертикали текст обрезался.

Модифицируйте предыдущую задачу так, чтобы по наведению мышкой на див высота дива становилась достаточно большой, чтобы в этот див поместился весь текст.

Сделайте див шириной и высотой в `300px`. Добавьте в наш див картинку, которая будет больше дива по ширине и по высоте. Проверьте, что картинка будет вылезать за границы дива.

Модифицируйте предыдущую задачу так, чтобы при вылезании картинки появлялись полосы прокрутки.

Модифицируйте предыдущую задачу так, чтобы вылезающие части картинки обрезались.

Модифицируйте предыдущую задачу так, чтобы вылезающие части картинки обрезались по горизонтали, а по вертикали появлялась полоса прокрутки.

Сделайте див шириной и высотой в `150px`. Сделайте так, чтобы независимо от содержимого дива в нем всегда была полоса прокрутки по вертикали.

## Обрезание текста

`text-overflow`

Сделайте див шириной `200px`. Сделайте так, чтобы текст в этом диве не переходил на новую строку. Добавьте в див длинный текст, который не будет помещаться по ширине в этот блок. Проверьте то, что текст вылезет с правой части блока.

Модифицируйте предыдущую задачу так, чтобы в диве при вылезании текста появлялась горизонтальная полоса прокрутки.

Модифицируйте предыдущую задачу так, чтобы вылезающий по горизонтали текст обрезался.

Модифицируйте предыдущую задачу так, чтобы при обрезании текста ему в конец добавлялось троеточие.

Модифицируйте предыдущую задачу так, чтобы по наведению мышкой на див текст переставал выстраиваться в одну линию и див расширялся по высоте, вмещая весь текст.

## Длинные слова

`word-break` `overflow-wrap`

Напишите код, демонстрирующий работу описанных свойств. Продемонстрируйте отличия между двумя свойствами.

## Переносы

`hyphens` `wbr`

Сделайте див шириной `300px`. Вставьте в этот див длинный текст. Сделайте так, чтобы в этом тексте автоматически расставились переносы.

← →
↑