თვისება overflow

თვისება overflow აზღვევს ბრაუზერს, როგორ მოიქცეს კონტენტთან (ტექსტი, სურათები, სხვა ბლოკები), რომელიც ბლოკის საზღვრებს გარეთ გადის (მის სიგანეს ან სიმაღლეზე). ბრაუზერს შეუძლია დამალოს გამოსული ნაწილი, დაამატოს გადახვევის ზოლები ან არაფერი გააკეთოს (დატოვოს როგორც არის - საზღვრებს გარეთ გამოსულად).

სინტაქსი

სელექტორი {
	overflow: hidden | scroll | auto | visible;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`hidden`	ამალებს იმ კონტენტს, რომელიც ბლოკის საზღვრებს გარეთ გადის.
`scroll`	ამატებს გადახვევის ზოლებს, ყოველთვის, მაშინაც კი, თუ არაფერი გადის (ამ შემთხვევაში ისინი არააქტიური იქნება).
`auto`	ამატებს გადახვევის ზოლებს საჭიროებისამებრ: თუ კონტენტი არ ტევა - ისინი გამოჩნდება, თუ ყველაფერი ტევა - არ იქნება.
`visible`	არ ამალებს იმ კონტენტს, რომელიც ბლოკის საზღვრებს გარეთ გადის.

მნიშვნელობა ნაგულისხმევად: visible.

მაგალითი . მნიშვნელობა visible

ამ მაგალითში ძალიან გრძელი სიტყვა არ ჩაეტევა კონტეინერში და მის საზღვრებს გარეთ გამოვა. ამოჭრა არ მოხდება:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

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

მაგალითი . მნიშვნელობა visible

ახლა კი შეზღუდულია არა მხოლოდ სიგანე, არამედ სიმაღლეც (ტექსტი ბლოკს გარეთ გამოვა სიმაღლეზეც):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	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
	loooooooooooooooooooooooooooooooongword,
	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
	loooooooooooooooooooooooooooooooongword,
	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
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

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

მაგალითი . მნიშვნელობა auto

ახლა კი შევზღუდოთ სიგანე - გამოჩნდება ჰორიზონტალური გადახვევის ზოლი:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

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

იხილეთ აგრეთვე

თვისება word-break,
რომელიც გრძელი სიტყვის ასოებს ახალ ხაზზე გადასცემს
თვისება overflow-wrap,
რომელიც გრძელი სიტყვის ასოებს ახალ ხაზზე გადასცემს
თვისება overflow-x,
რომელიც ჰორიზონტალურად გამოსულ ნაწილებს აჭრის
თვისება overflow-y,
რომელიც ვერტიკალურად გამოსულ ნაწილებს აჭრის