Wartość visible jest domyślną wartością właściwości overflow-x.
Domyślnie treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź prawego wewnętrznego marginesu elementu HTML pozostaje widoczna.
overflow-x:visible;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź prawego wewnętrznego marginesu przykładowego elementu "div" pozostała widoczna.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
width:350px;
white-space:nowrap;
border:15px solid orange;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>
Za pomocą wartości hidden właściwości overflow-x możemy sprawić, że treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź prawego wewnętrznego marginesu interesującego nas elementu HTML zostanie ukryta.
overflow-x:hidden;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź prawego wewnętrznego marginesu przykładowego elementu "div" została ukryta, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-x" wraz z wartością "hidden".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
overflow-x:hidden;
width:350px;
white-space:nowrap;
border:15px solid orange;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>
Za pomocą wartości auto właściwości overflow-x możemy sprawić, że do obszaru interesującego nas elementu HTML zostanie dodany (lecz tylko wtedy, gdy jest to konieczne) poziomy suwak służący do przewijania treści.
overflow-x:auto;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Ze względu na to, iż treść przykładowego elementu "div" nie mieści się w obszarze wyznaczonym przez zewnętrzną krawędź prawego wewnętrznego marginesu przykładowego elementu "div", do obszaru przykładowego elementu "div" został dodany poziomy suwak służący do przewijania treści, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-x" wraz z wartością "auto".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
overflow-x:auto;
width:350px;
white-space:nowrap;
border:15px solid orange;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>
