Overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Overflow</title>
<style>
.demoOverflow {
background: cornflowerblue;
padding: 10px;
width: 75%;
height: 200px;
border: 2px solid indigo;
text-align: justify;
overflow: auto;
}
.demoWrap {
background: lightblue;
padding: 10px;
width: 200px;
height: 150px;
border: 2px solid blue;
overflow: auto;
overflow-wrap: visible;
}
</style>
</head>
<body>
<!--
overflow : controls what happens to content that is too big to fit into an area.
overflow property has following values:
- visible - Default. The overflow is not clipped. The content renders outside the element's box.
- hidden - The overflow is clipped, and the rest of the content will be invisible.
- scroll - The overflow is clipped, and a scrollbar is added to see the rest of content.
- auto - Similar to scroll, but it adds scrollbars only when necessary.
overflow-x : specifies what to do with the left/right edges of the content.
overflow-y : specifies what to do with the top/bottom edges of the content.
overflow-wrap : Specifies whether or not the browser can break lines with long words, if they overflow its container.
- normal - Long words will not break, even if they overflow the container. This is default
- anywhere - Long words will break if they overflow the container.
- break-word - Long words will break if they overflow the container.
- initial - Sets this property to its default value.
- inherit - Inherits this property from its parent element.
-->
<h1>Demo: Overflow </h1>
<p class="demoOverflow">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et optio sint quis doloremque debitis reiciendis mollitia ullam est porro, sequi voluptate, ut tempora placeat, pariatur cumque magni recusandae fugiat sed earum! Debitis aut repellendus velit explicabo quia. Necessitatibus accusamus incidunt illo repellendus beatae rem tempore cupiditate, possimus rerum expedita? Doloremque, cum odio eaque at alias inventore itaque hic dolorum maxime, blanditiis eveniet voluptatibus ratione voluptate, labore quod aperiam! Necessitatibus cumque, magnam, excepturi voluptates pariatur autem, tempora sapiente hic molestiae harum corporis inventore qui laudantium? Quod deleniti velit nihil officia eius, qui rem minus vel a quo autem ipsam tenetur voluptatibus eum. Similique totam officia dignissimos molestias saepe! Molestiae vitae, ipsa dicta quam maiores asperiores eos officia aspernatur. Sed esse illum porro totam sunt deserunt cum, minus odit veritatis delectus quas facilis ipsam recusandae itaque! Eligendi vel ratione culpa? Sint eum est perferendis, esse inventore error? Et tempore molestiae nobis laudantium nihil quae officiis id, iure fugiat voluptatem aut tenetur corrupti distinctio! Est inventore asperiores eaque! Distinctio, harum nihil repudiandae, aliquam architecto quam vero quod tempore minus beatae aspernatur ea error esse hic! Veniam exercitationem cupiditate ipsa repellendus obcaecati voluptatibus, blanditiis aliquid possimus dolor animi soluta fuga sapiente excepturi corporis totam suscipit deserunt nostrum veritatis, voluptate autem illum ea! Corporis ipsam consequuntur quasi! Sapiente distinctio explicabo quaerat nihil at eum harum possimus perferendis magnam? Iste consectetur eius quaerat dicta, maxime dignissimos nostrum minima, obcaecati debitis totam accusantium placeat cupiditate? Blanditiis corporis voluptatum placeat ullam voluptate veniam. Iure, culpa ratione! Quas consequatur, perspiciatis nam eligendi consectetur sapiente, ipsa illo a animi cumque qui quis culpa quod dolorem illum magnam. Consequatur eligendi mollitia quia. Reprehenderit deleniti nihil ipsam voluptatum vero cumque quam tempora itaque nisi repudiandae reiciendis recusandae eveniet fuga adipisci, vel incidunt eum ratione enim delectus a rerum soluta dolorem in provident. Harum corrupti, obcaecati omnis eveniet porro ex sequi maiores minima, alias aliquid, optio asperiores id! Temporibus numquam dolorum exercitationem fuga iure consequatur est, quibusdam praesentium possimus consequuntur impedit excepturi officiis labore illo iusto. At praesentium amet deleniti cumque, dolore voluptatum voluptate aliquid inventore, maxime omnis veniam deserunt. Neque ipsa placeat architecto impedit assumenda soluta ea nulla esse! Id dolor beatae molestias. Sequi sit error cum itaque dolore, aut vero dolores similique totam, illum odio nam impedit cumque maiores accusamus eum incidunt aliquid! Laboriosam et odit reiciendis repellat ipsam iusto, minus quos sequi velit debitis maiores saepe, impedit sunt laudantium fugit exercitationem ut deserunt ad non, ea veritatis? Quo suscipit sit perspiciatis libero nemo officia deleniti dignissimos velit dolores perferendis modi magnam ipsam, quasi assumenda inventore, iure sequi, sapiente itaque tempora voluptas doloremque. Velit quo nam officia enim dolorum, laudantium obcaecati ducimus tenetur nihil praesentium sunt architecto doloremque iusto aspernatur consectetur voluptates in atque maiores numquam quia odit similique mollitia ex? Magnam praesentium iusto fuga rerum deserunt sapiente veniam, illum dolorem ut laudantium vel est id laborum, odit, quae harum temporibus numquam. Ea, tenetur mollitia rem autem voluptates dicta dolores aperiam deserunt! Quas eius consequatur doloremque sed praesentium repellat dolorem asperiores corporis temporibus, accusamus veniam quis facilis sint eos! Ratione, eveniet labore eligendi explicabo asperiores reprehenderit neque officia in veritatis voluptate a dignissimos excepturi sed recusandae consequuntur magnam nihil nesciunt repellat nobis. Maxime ad autem doloribus, cupiditate sapiente ab sequi! Ad ea adipisci magni perferendis debitis vel accusamus ullam quis laboriosam laborum molestias quam placeat odio enim pariatur officia reprehenderit, eveniet cumque autem dolor voluptatem velit unde vero labore! Similique magnam beatae dignissimos illo suscipit vero eligendi laborum quas asperiores distinctio eum adipisci laudantium cum nostrum aspernatur culpa sint et animi perferendis sit quisquam, velit illum dolorem provident. Labore rerum rem, debitis, esse quisquam optio fuga aspernatur saepe magni odit nihil, et facere fugiat! Saepe itaque rem quae ratione velit doloremque at ducimus reprehenderit aspernatur commodi? Esse ipsum est ut earum iste ratione optio sunt culpa et cum libero reiciendis nulla eum animi minima dolorum cupiditate impedit, iure porro, incidunt saepe voluptas fugiat. Ab officia rerum commodi, facere iste recusandae, tempore accusantium consequatur libero illo ipsum temporibus consectetur quia. Quibusdam id placeat delectus ut ratione at ipsam, eos tempora laudantium ab similique quod laborum eaque illo accusamus, possimus fuga, alias labore ad facere quas et natus? Repellendus voluptatem incidunt nisi eaque sed quasi nobis at, maiores facilis minima ex aut consequuntur numquam expedita, quod vel magnam nam aliquam modi harum corporis molestiae? Deleniti beatae quia nam quasi ducimus obcaecati eum dicta repudiandae in? Accusamus placeat molestias nam error ex? Ratione aliquam explicabo fuga consequatur recusandae magni deleniti sapiente, illo minus eveniet asperiores rerum ad expedita laboriosam. Totam facere provident quia nesciunt consequatur eveniet rerum, consectetur officia praesentium, quam placeat nobis optio officiis magni eligendi! Consequatur quis aliquid molestias possimus, ad vel vero magnam sunt voluptate debitis neque sed aliquam obcaecati amet tempore, quod similique illo temporibus eum. Commodi repudiandae sapiente ea placeat a minus provident, deleniti unde nulla officia nisi quidem, voluptates veniam vitae consequatur facere asperiores sit pariatur assumenda expedita illum maxime saepe quo doloribus? Deserunt numquam ullam recusandae, excepturi possimus beatae debitis explicabo reiciendis consequatur cupiditate inventore iste nobis provident ad fugiat iusto. Velit quod, debitis voluptatem praesentium officia, quis ad ea qui aperiam ex officiis est, amet laborum illo eius tempore doloremque. Magnam doloribus amet ipsa velit nemo eaque ad sint, nisi similique? Repellendus quisquam dignissimos error? Blanditiis quis quod similique, modi ducimus necessitatibus cum molestias praesentium autem deserunt, maxime animi quidem consectetur impedit suscipit, tempora doloremque. Beatae vel maiores, culpa tempore magnam illum facilis tempora expedita mollitia ratione! Est, soluta esse accusantium explicabo unde officia ad exercitationem mollitia temporibus veniam! A eveniet illum ex aspernatur. Quaerat tempora magni, perspiciatis atque quos dolores vitae ea quae rerum, molestiae et, vero consequatur ducimus delectus quibusdam ut laudantium voluptatibus asperiores at! Dolore assumenda deleniti quis autem fugit saepe quidem, in id quae molestiae rerum. Culpa amet doloribus saepe soluta et animi atque qui, minus temporibus voluptatem fugiat itaque, fugit beatae repellat assumenda cupiditate in at vel, accusantium labore quidem est repudiandae non. Ea itaque odio repellendus explicabo qui similique necessitatibus.</p>
<p class="demoOverflow">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et opt</p>
<h2>Demo Overflow Wrap</h2>
<div>
<p class="demoWrap">Lorem ipsum dolor sit amet <strong>abcdefghijklmnopqrstuvwxyz_1234567890</strong> elit. Fugiat veritatis reiciendisape corrupti! Non illum adipisci iure voluptatibus vero ullam explicabo modi, ducimus repellendus, possimus, et tenetur consectetur.</p>
</div>
</body>
</html>