More-CSS-and-Animation/overflow.html at main · AbulFozolJumman/More-CSS-and-Animation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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">
    <title>CSS Image Optimization and Overflow</title>
    <!-- CSS Overflow -->
    <style>
        div, h1{
            height: 300px;
            width: 400px;
            border: 1px solid red;
        }
        .box-1{
            overflow: hidden;
        }
        .box-2{
            overflow: scroll;
            overflow-x: hidden;
        }
        .box-3{
            overflow-y: scroll;
        }
        /* Text ellipsis */
        h1{
            white-space: nowrap;
            height: 50px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 1(CSS Image Optimization) -->
        <!-- To Optimize Image
        Go to - Photopea.com
                tinyjpg.com
        -->
    <!-- 2(CSS Overflow and Text ellipsis) -->
        <div class="box-1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima qui, modi, alias unde nulla ut nesciunt inventore labore rem soluta autem corporis assumenda facere itaque dolorem tenetur fugit sit! Explicabo sunt eos doloribus excepturi, ipsam veniam similique molestias architecto repudiandae dolores optio delectus sit voluptates eligendi, ducimus cum debitis sequi quaerat voluptatum, nam quasi obcaecati? Autem quam saepe eligendi optio, totam corrupti ut sapiente, quaerat tempore obcaecati error, perferendis repudiandae at maxime ab! Cumque id vel error non nemo omnis iure aspernatur repellat unde eveniet consequatur architecto, quisquam doloremque obcaecati necessitatibus eligendi totam impedit animi reprehenderit saepe. Reiciendis ipsa quasi itaque dolores vel? Non officia neque eligendi explicabo animi rerum id tempora facere nam sit a deserunt ipsum modi minima sint obcaecati hic porro soluta, aspernatur repellat cumque! Animi suscipit sapiente voluptatibus quis consequuntur officiis, amet ab labore deserunt eum perspiciatis maiores cumque itaque repellendus minus magnam totam provident esse reiciendis aliquid nesciunt distinctio nam quas? Iusto, qui eius. Est quod id amet ipsa exercitationem odio pariatur enim animi, totam neque quidem perspiciatis, iste impedit hic illo quos reiciendis omnis necessitatibus! Distinctio, dolorum ea itaque provident deleniti et quos maxime error natus cupiditate recusandae maiores unde, fuga, possimus cum impedit quod voluptate culpa fugiat eius fugit libero vero rem? Optio mollitia modi veniam. Earum blanditiis porro perferendis id ab inventore, temporibus enim sequi optio sint ullam illo voluptatem officiis molestiae beatae praesentium obcaecati quis. Rerum totam possimus earum facere natus aliquid amet magni ut incidunt illum ipsa minus dolorem voluptas similique quod voluptatem hic quas a aut libero recusandae expedita nemo, nulla et? Vitae, rerum quo? Odit voluptatum architecto, corrupti neque nobis eos tenetur. Laudantium molestiae eum quasi odio veritatis incidunt soluta magni consectetur mollitia, libero ullam commodi cupiditate animi cumque at, numquam voluptas aperiam fugit laborum. Esse impedit odit animi facere sunt cumque architecto, ipsam quis sit vitae blanditiis nobis facilis incidunt ut accusantium reiciendis neque obcaecati laboriosam nesciunt voluptas ab, magnam velit. Ab tempore maiores id, repellat hic necessitatibus illum qui repellendus nihil atque quis ad cumque. Molestias eaque officiis a illo tempora praesentium quam esse? Provident obcaecati aperiam iste pariatur eos distinctio fuga error nemo velit! Iste magni est inventore asperiores. Deleniti doloremque aliquam porro repellendus, earum sint obcaecati quam, magni alias voluptas ut repellat harum. Facilis possimus quae temporibus quisquam facere incidunt illo et? Sit dolorem dolores alias ipsum magnam amet saepe incidunt quod aliquam magni.</p>
        </div>
        <div class="box-2">
            <p>Ipsam modi temporibus veniam autem optio iste ipsum dolorem aperiam, accusantium illum voluptas blanditiis exercitationem porro praesentium voluptatibus facilis repellendus distinctio dolor dignissimos excepturi odit quae odio a sed. Porro totam nihil molestiae quidem inventore fugiat debitis obcaecati dolor, minima nesciunt in expedita mollitia quia, magnam, rerum alias! Ipsum delectus quasi corrupti mollitia provident nisi, minima a qui, natus eveniet omnis quibusdam eius ab, assumenda repellat ullam commodi itaque. Error nemo a architecto minima, commodi officia corporis! Assumenda consequuntur qui magni laborum provident ipsa eligendi blanditiis in fugiat corrupti? Maxime eum debitis ab magnam a repellendus alias iste enim laboriosam, similique error, illo fugiat temporibus deleniti asperiores molestiae unde quam minus nemo doloremque nihil quos dolorem quod. Ipsam nesciunt atque, quod esse consectetur, magni, perferendis officiis quis dignissimos ad odit porro! Ad omnis debitis dolores dolorem necessitatibus totam. Iste in obcaecati temporibus sunt dolorem eligendi nesciunt, cupiditate laudantium, sed molestias et, suscipit incidunt totam quisquam consectetur. Ipsam perspiciatis vitae sunt, temporibus expedita tempore suscipit nihil itaque neque sit, quo excepturi tempora ab distinctio porro labore nemo ipsum dolore reprehenderit! Modi possimus at atque? Corporis at cumque excepturi quaerat labore maiores accusamus ducimus ad officiis facilis dolores architecto, facere et doloremque eveniet unde sapiente neque omnis quo maxime? Dolor aliquid animi sint veritatis fugiat est vitae commodi reiciendis illum? Aspernatur nostrum soluta veritatis, modi tempora repellat illum praesentium dicta ipsa quia unde temporibus delectus, excepturi in! Necessitatibus iure fugiat recusandae enim dolorum aliquid hic aspernatur fugit temporibus illum impedit explicabo dolore, accusamus incidunt, quasi est nostrum praesentium magni voluptas facilis ipsam maiores? Eveniet exercitationem, est architecto ipsum expedita tenetur tempore dolorum, aspernatur velit saepe odio sapiente dolor ducimus ratione! Suscipit mollitia distinctio, earum pariatur excepturi eaque dicta commodi! In qui natus ipsa iusto asperiores a facere quos vero, laboriosam consequuntur tempore porro quibusdam fugiat ducimus quam reprehenderit pariatur incidunt id corrupti ratione. Quisquam necessitatibus, sunt quod quam mollitia voluptatum fuga, veritatis neque reiciendis nulla unde dolor dolores impedit alias. Voluptatum repudiandae impedit vitae, cum a debitis dolorum nulla tenetur voluptas nam iure saepe accusamus officiis soluta reiciendis velit! Neque laudantium error cumque ad unde beatae veniam quas reiciendis vel maiores quia quod nihil libero eaque repudiandae ut dignissimos autem soluta provident, ratione ab iure rerum incidunt hic? Nam modi molestias, nihil animi reprehenderit iusto ex? Quae voluptate, quidem a magni mollitia iusto ab consequuntur, itaque perferendis placeat iure deserunt? Pariatur, similique.</p>
        </div>
        <div class="box-3">
            <p>Molestiae ratione mollitia autem eveniet natus. Ipsum odio error, cumque, ab expedita consectetur asperiores porro, dolores aut deserunt cupiditate debitis eius tenetur. Cupiditate quaerat soluta, commodi nemo consequatur veritatis! Veniam nesciunt voluptate dolorem fugiat. Officia nisi ratione tempore eum molestiae exercitationem dolorem reiciendis hic omnis possimus! Dolorum adipisci debitis nisi perferendis voluptatibus cum accusantium fugit omnis eos aliquam fugiat unde, quos ut libero nulla excepturi rerum, ipsum nostrum possimus numquam ducimus ratione? Quo labore eligendi recusandae voluptatibus magni repellat possimus vel odio laborum inventore, vitae sunt ex cum tempora aperiam velit rerum officia ab laboriosam rem suscipit totam amet. Magnam tenetur excepturi, sed corporis quaerat doloribus. Culpa esse veniam accusantium provident sunt minus est magnam autem rem pariatur, dolor atque placeat, ipsa inventore adipisci accusamus molestiae a sapiente, corporis quo optio. Consequatur eveniet modi ad iusto fuga quos fugit eos voluptates ducimus quia deserunt rerum, consequuntur aliquid expedita. Dolore quaerat molestias, neque labore dicta cupiditate doloremque rem id error, excepturi maxime saepe possimus ipsum debitis soluta. Hic quas id, itaque amet modi culpa! Ex esse illo consectetur nisi vero fuga quidem, voluptatum harum beatae reprehenderit libero. Similique impedit quis culpa sint velit, repudiandae, id temporibus tempora ab eius nemo laudantium. Molestias necessitatibus unde dignissimos nam porro sint, consequatur sequi rem quam minima possimus id quas rerum vitae consequuntur commodi voluptatem aspernatur beatae eius. Illo qui molestiae doloribus consequuntur aliquid. Quo consectetur aspernatur dolores voluptatum vitae rerum, quis aliquid quasi hic inventore! Vitae quam pariatur asperiores reiciendis incidunt ut earum quis, facilis numquam error officia, itaque repellat consequatur, omnis voluptate tempore rem officiis? Voluptatibus quaerat eaque perspiciatis mollitia, magnam asperiores? Deleniti quam dignissimos dicta facere accusamus nobis illum officiis earum amet ipsum necessitatibus vero aut perferendis esse quas, veritatis officia. Cumque iure cupiditate quod eum porro explicabo nisi, maiores officiis, ab tempore id illum sunt voluptatem? Assumenda accusamus voluptatum maiores placeat excepturi quaerat animi, eaque qui, laudantium blanditiis commodi quibusdam porro autem eos quae? Nobis, pariatur fugiat quo et sequi minus laudantium quas cupiditate ab voluptatibus. Minus consectetur assumenda commodi quisquam ullam alias iste facilis numquam ut ipsum placeat voluptatem delectus, minima dicta! Asperiores enim iusto at animi maxime! In quisquam molestias commodi perspiciatis possimus repudiandae ut quia temporibus nisi facilis ratione deleniti saepe accusamus porro quam libero optio tenetur inventore incidunt, at quae harum fuga? Libero consequuntur nostrum quos blanditiis laboriosam, tenetur aperiam hic non labore culpa fugit ducimus amet!</p>
        </div>
        <h1 title="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla, dolor perferendis? Saepe aliquid porro culpa similique! Nisi voluptas ut quod.">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla, dolor perferendis? Saepe aliquid porro culpa similique! Nisi voluptas ut quod.</h1>
</body>
</html>