Погледајмо класичан пример елемента који је врло мали по свом садржају и који генерише преливање, јер је све лакше видети кроз примере, прво да видимо један пре него што наставимо да видимо својства која нам помажу да контролишемо преливање.
ПримерПостоји много различитих врста воћа - само преко 500 врста банана постоји. Док додамо безброј врста јабука, поморанџи и другог добро познатог воћа, суочени смо са хиљадама избора.
Претходни код генерише следећи резултат у прегледачу:
оверфлов-к / оверфлов-и: Одређују понашање хоризонталног или вертикалног преливања.
Преливање: То је пречица за коришћење претходног својства и редослед којим ради је оверфлов, оверфлов к, оверфлов и.
Својства која се могу користити са елементом преливање су следећи:аутомобил: Ова вредност деле на претраживач одговорност да одлучи шта да ради, обично се дешава да се трака за померање прикаже када елемент почне да се прелива и садржи га.
сакривен: Садржај се приказује до дела који се не прелива, скривајући остатак садржаја, нема механизме да каже кориснику шта треба да уради да види остатак садржаја.
без садржаја: Преплављени садржај се уклања ако се не може сместити у контејнер. Ову вредност не подржава ниједан од најпопуларнијих прегледача
без приказа: Садржај је сакривен ако се не може у потпуности приказати. Ову вредност не подржава ниједан од најпопуларнијих прегледача.
свитак: Претраживач генерише траку за померање која омогућава кориснику да увек види преплављени садржај унутар контејнера. Трака ће зависити од прегледача и система да дефинишу начин приказа. Трака за померање ће увек бити видљива чак и ако елемент не пређе.
видљиво: Ово је подразумевана вредност. Садржај се увек приказује чак и ако се прелива.
Сада када имамо алате за напад на преливање, хајде да видимо у пракси како га можемо применити, ништа боље од малог кода да то демонстрирамо:ПримерПостоји много различитих врста воћа - само преко 500 врста банана постоји. Док додамо безброј врста јабука, поморанџи и другог добро познатог воћа, суочени смо са хиљадама избора.
Постоји много различитих врста воћа - само преко 500 врста банана постоји. Док додамо безброј врста јабука, поморанџи и другог добро познатог воћа, суочени смо са хиљадама избора.
Користили смо два елемента да покажемо како преливање, на прво место стављамо имовину сакривен где знамо да ће се само садржај приказивати до места где почиње преливање, онда је остатак скривен, а за други користимо сцролл, са којим ће се приказати трака за померање без обзира да ли се елемент прелива или не, да видимо резултат:
