Tutorial by Examples

HTML <div> This div is too small to display its contents to display the effects of the overflow property. </div> CSS div { width:100px; height:100px; overflow:scroll; } Result The content above is clipped in a 100px by 100px box, with scrolling available ...

overflow-wrap tells a browser that it can break a line of text inside a targeted element onto multiple lines in an otherwise unbreakable place. Helpful in preventing an long string of text causing layout problems due to overflowing it's container. CSS div { width:100px; outline: 1px dash...

HTML <div> Even if this div is too small to display its contents, the content is not clipped. </div> CSS div { width:50px; height:50px; overflow:visible; } Result Content is not clipped and will be rendered outside the content box if it exceeds its co...

Using the overflow property with a value different to visible will create a new block formatting context. This is useful for aligning a block element next to a floated element. CSS img { float:left; margin-right: 10px; } div { overflow:hidden; /* creates block formatting context...

These two properties work in a similar fashion as the overflow property and accept the same values. The overflow-x parameter works only on the x or left-to-right axis. The overflow-y works on the y or top-to-bottom axis. HTML <div id="div-x"> If this div is too small to displa...