CSS свойство overflow
Сегодня вашему вниманию будет посвящена тема, в которой мы изучим с Вами очередное свойство, а называется оно css свойство overflow. Отвечает оно за управление содержимым элемента, которое выходит за его пределы. Допустим, у нас есть блок определенной ширины и высоты, в котором находится текст, но ваш текст полностью не помещается в этот блок и выходит за его пределы. Что делать в получившейся ситуации? На помощь приходит css свойство overflow. Давайте напишем код, который будем использовать в дальнейшем.
<html>
<head>
<title>Overflow</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div>
<p>Текст который не должен помещаться в блок который мы создали. Для этого мы напишем много текста. Вот и все.</p>
</div>
</body>
</html>
И применяем css код, который будет отвечать за отображение содержимого блока:
div {
border: 1px solid #000;
overflow: hidden;
height: 100px;
width: 200px;
}
Мы создали блок и поместили в него текст. Для блока была задана рамка, а также фиксированная ширина и высота. И при помощи свойства overflow, скрываем ту часть, которая не помещается в блок.
Рассмотрим значения, которые может принимать данное свойство. Первое значение, оно же значение по умолчанию является visible, означающее, что все содержимое будет отображаться независимо от того, помещается оно в блок или же нет. Второе значение - hidden, мы его используем в нашем примере. При его использовании, мы скрываем содержимое, которое не помещается в блоке. Значение scroll, добавляет полосы прокрутки в любом случае, нужны они или не нужны. И последнее значение - auto, также добавляет полосы прокрутки, но уже только в том случае, если они действительно необходимы.
Продемонстрирую Вам, что получится при трех разных значениях, в нашем случае.
Результат является довольно предсказуемым, поэтому дополнительных пояснений не нужно. И на этом мы завершим изучение свойства overflow, до скорого!
