თვისება white-space

თვისება white-space ადგენს თუ როგორ გადატანოს ტექსტი ახალ ხაზზე, ასევე თუ როგორ გამოჩნდეს სივრცეები სიტყვებს შორის და ხაზების გატეხვა (ადგილები, სადაც დააჭირეს Enter კოდის წერისას).

სინტაქსი

სელექტორი {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

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

მნიშვნელობა	აღწერა
`nowrap`	კრძალავს ტექსტის გადატანას სხვა ხაზზე, მაშინაც კი, თუ ის არ ჯდება კონტეინერის სიგანეში (ამ შემთხვევაში ტექსტი უბრალოდ გამოვა მის ფარგლებს გარეთ). თუმცა, `br` ტეგის დამატება აიძულებს ტექსტს გადავიდეს ახალ ხაზზე.
`pre`	ტექსტი გამოჩნდება ისე, როგორც იყო აკრეფილი საიტის ვერსტკის კოდში: ყველა სივრცით და enter-ებით (თუ კოდში რამდენიმე სივრცეა აკრეფილი - ეკრანზეც იქნება რამდენიმე). ამ შემთხვევაში ბრაუზერი არ გადაიტანს ტექსტს ახალ ხაზზე, თუ ის არ ჯდება კონტეინერში - ტექსტი უბრალოდ გამოვა მის ფარგლებს გარეთ. ტეგ pre-ის ანალოგი, მაგრამ მისგან განსხვავებით არ ცვლის შრიფტს მონოსპეისურზე (მონოსპეისურ შრიფტზე იხ. თვისება `font-family`.
`pre-wrap`	იგივე, რაც pre, განსხვავება ისაა, რომ თუ ტექსტი ძალიან გრძელია და არ ჯდება კონტეინერში - ბრაუზერი გადაიტანს მას სხვა ხაზზე.
`pre-line`	ბრაუზერი ითვალისწინებს მხოლოდ Enter-ებს HTML კოდში და აიგნორებს ყველა დანარჩენს (რამდენიმე სივრცე ერთის მსგავსად გამოჩნდება, ბრაუზერი თავად ათავსებს ხაზების გატეხვას).
`normal`	სტანდარტული ქმედება: ბრაუზერი თავად ათავსებს ხაზების გატეხვას ისე, რომ სიტყვები ჩავიდეს კონტეინერში. კოდში რამდენიმე სივრცე ეკრანზე ერთის მსგავსად გამოჩნდება.

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

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

ამ მაგალითში ტექსტი არ ჩაეტევა კონტეინერში და გამოვა მის ფარგლებს გარეთ, რადგან მინიჭებულია მნიშვნელობა nowrap:

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

მაგალითი . მნიშვნელობა nowrap და ტეგი br

თუ დავამატებთ br ტეგს - ტექსტი გადაიყვანება ახალ ხაზზე (ზუსტად იმ ადგილას, სადაც დგას br):

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

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

ამ მაგალითში ტექსტი გამოჩნდება ისე, როგორც იყო აკრეფილი HTML კოდის რედაქტორში (ყველა ტაბულატორით, Enter-ით და ა.შ.):

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

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

მაგალითი . მნიშვნელობა pre-wrap

ახლა კი ტექსტი გამოჩნდება ისე, როგორც იყო აკრეფილი HTML კოდის რედაქტორში, თუმცა, გამოწეული ნაწილები გადაიყვანება ახალ ხაზზე:

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

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

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

თვისებები word-break და overflow-wrap,
რომლებიც საშუალებას აძლევს გრძელი სიტყვის ასოები გადავიდნენ ახალ ხაზზე
თვისება tab-size,
რომელიც ადგენს ტაბულატორით შექმნილი შეწევის ზომას
თვისება hyphens,
რომელიც ჩართავს სიტყვების მარცვალ-მარცვალად გატეხვას
თვისება overflow,
რომელიც წყვეტს ბლოკის ფარგლებს გარეთ გამოწეულ ნაწილებს
ტეგი pre,
რომელიც აჩვენებს ტექსტს ისე, როგორც ის იყო აკრეფილი HTML კოდის რედაქტორში