gdy pole określone przez nadaną wielkość DIVa jest mniejsze od miejsca jaki potrzebuje tekst w nim zawarty wówczas w zależności od przeglądarki stanie się:
FireFox - tekst wyjdzie poza DIVa w którym powinien się zawierać.
IntrnetExplorer zignoruje wymiary i rozciąga DIVa
Oba sposoby dają dla wyglądu strony beznadziejny wygląd.
Test 1. To jest tekst testowy. jest go za dużo by zmieścił się w swym polu, określonym przez DIVa. Coż więc z nim począć?
Uprzyjmy się jednak, że chcemy by nic pozd określoną wielkość DIVa nie wychodziło. Stanie się tak gdy w stylach przypiszemy DIVowi
overflow: hidden;Test 2 To jest tekst testowy. jest go za dużo by zmieścił się w swym polu, określonym przez DIVa. Coż więc z nim począć?
Udało się wyśmienicie, nic poza DIVa nie sterczy, Div nie zmienił swego wymiaru, tylko straciliśmy trochę tekstu.
Rozwiązaniem (ale nie dla IE) może być by po najechaniu myszką (stan :HOVER) pokazał się cały tekst. (tu DIV nazywa się typ3)
#typ03 {overflow: hidden;}
#typ03:hover {overflow: visible;}
Test 3 To jest tekst testowy. jest go za dużo by zmieścił się w swym polu, określonym przez DIVa. Coż więc z nim począć?
Partyzanckim rozwiazaniem było by by dać dla tekstu:
<p title="Test 4... ...począć?>Wówczas przy przytrzymaniu myszki nad tekstem pokaże nam się taka żółciutki prostokącik z tekstem (cały w IE i skrócony w FF) -przetestuj!
Test 4 To jest tekst testowy. jest go za dużo by zmieścił się w swym polu, określonym przez DIVa. Coż więc z nim począć?
Najsensowniejszym rozwiązaniem wydaje się jednak przewijanie tekstu
#typ04 { overflow: auto; overflow-y: auto; overflow-x: hidden;}I coż bystrzaki, dostrzegliście zapewne, że tu mamy aż 3 przewijania. Na ogół robi sie haki na IE, tu jednak zrobiłem na FF. W tym wypadku Internet Explorer dał mi tylko przewijanie w pionie, a FireFox również zbędne w poziomie, co spowodowało że suwak przysłonił pół pola. Na szczęście FF rozumie a IE nie OVERFLOW-X/Y. Dlatego IE przeczytał tylko pierwszą część, a FF przeczytał 3 ale 2 następne zmieniły mu 1 cechę i jest OK.
I jeszcze jedna metoda obcinania zawartości poprzez zastosowanie cechy CLIP
p{clip:rect(10px 250px 40px 30px); position: absolute; background-color: #eee; }
Test 5 To jest tekst testowy. jest go za dużo by zmieścił się w swym polu, określonym przez DIVa. Coż więc z nim począć?
Gdy wstawimy obrazek wiekszy niż DIV który go zawiera, możemy dzięki
overflow: hidden;możemy kadrować i dowolnie przycinać obrazek (to na dole to 4x ten sam obrazek) ustawiając położenie poprzez nadawanie marginesów np.:
.img02 {margin:-80px -80px; }