Уласцівасць overflow

Уласцівасць overflow паказвае браўзеру, як паступаць з змесцівам (тэкст, выябы, іншыя блокі), якое выязжае за межы блока (за яго шырыню альбо вышыню). Браўзер можа схаваць частку, якая выязжае, дадаць палосы пракруткі альбо нічога не рабіць (пакінуць як ёсць - вылезлым за межы).

Сінтаксіс

селектар {
	overflow: hidden | scroll | auto | visible;
}

Значэнні

Значэнне	Апісанне
`hidden`	Хавае тое змесціва, якое выязжае за межы блока.
`scroll`	Дадае палосы пракруткі, прычым заўсёды, нават калі нішто не выязжае (у гэтым выпадку яны будуць неактыўнымі).
`auto`	Дадае палосы пракруткі пры неабходнасці: калі змесціва не змешчваецца - яны з'явяцца, калі ўсё змяшчаецца - іх не будзе.
`visible`	Не хавае тое змесціва, якое выязжае за межы блока.

Значэнне па змаўчанні: visible.

Прыклад . Значэнне visible

У гэтым прыкладзе вельмі доўгае слова не змесціцца ў кантэйнер і выязжае за яго межы. Абразання не адбываецца:

<div id="elem">
	Lorem ipsum dolor sit amet
	ооооооооооооооооооооооооооооочэньдоўгаеслова,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Прыклад . Значэнне visible

А зараз абмежавана не толькі шырыня, але і вышыня (тэкст выязжае за блок і па вышыні):

<div id="elem">
	Lorem ipsum dolor sit amet
	ооооооооооооооооооооооооооооочэньдоўгаеслова,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Прыклад . Значэнне hidden

Зараз усё, што выязжае за межы кантэйнера проста абрэжацца (і па вышыні таксама). Звярніце ўвагу на тое, што абрэзанне па вышыні адбываецца толькі тады, калі яна зададзена явна. У адваротным выпадку тэкст пашырае кантэйнер па вышыні - і ніякага абрэзання не будзе:

<div id="elem">
	Lorem ipsum dolor sit amet
	ооооооооооооооооооооооооооооочэньдоўгаеслова,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Прыклад . Значэнне scroll

Пры значэнні scroll палосы пракруткі будуць заўсёды, нават калі нішто не выязжае (у гэтым выпадку яны будуць неактыўнымі). Зараз тэкст не выязжае ні па шырыні, ні па вышыні, але палосы пракруткі ўсё роўна ёсць (неактыўныя):

<div id="elem">
	Lorem ipsum dolor sit amet
	ооооооооооооооооооооооооооооочэньдоўгаеслова,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Прыклад . Значэнне auto

Пры значэнні auto палосы пракруткі дадаюцца толькі, калі змесціва выязжае за кантэйнер. Зараз іх няма, так як усё змешчваецца:

<div id="elem">
	Lorem ipsum dolor sit amet
	ооооооооооооооооооооооооооооочэньдоўгаеслова,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Прыклад . Значэнне auto

А цяпер абмяжуем шырыню - з'явіцца гарызантальная палоса пракруткі:

<div id="elem">
	Lorem ipsum dolor sit amet
	ооооооооооооооооооооооооооооочэньдоўгаеслова,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Глядзіце таксама

уласцівасць word-break,
якая пераносіць літары доўгага слова на новы радок
уласцівасць overflow-wrap,
якая пераносіць літары доўгага слова на новы радок
уласцівасць overflow-x,
якая абрэзае часткі, якія выязжаюць па гарызанталі
уласцівасць overflow-y,
якая абрэзае часткі, якія выязжаюць па вертыкалі