explore-css3/overflow.html at main · fa1829/explore-css3 · 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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>Document</title>

    <style>
        .mega-box {
            width: 500px;
            height: 400px;
            border: 5px solid saddlebrown;
            overflow: scroll;
            overflow-x: hidden;
        }

        .smalll-box {
            width: 500px;
            height: 400px;
            border: 5px solid gold;
            overflow: scroll;
            overflow-x: hidden;
        }

        .overflow-ellipsis {

            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <h1>I am learning a new thing which make me happy</h1>
    <span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil earum velit quidem laudantium nam incidunt
        tenetur in soluta cum similique!</span>

    <pre>ellipsis</pre>
    <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <pre>" [..]"</pre>

    <div class="mega-box">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, odio quod. Voluptatum quae sed culpa
            veniam id, officiis consectetur a! Blanditiis ab ipsa accusamus totam nesciunt ex quae reiciendis iure, quo
            esse magni error. Blanditiis maiores cumque qui totam, placeat dignissimos distinctio facilis odit quidem
            similique harum corporis non autem aliquid ex odio iusto provident. Fugiat ducimus neque incidunt molestiae
            hic inventore reprehenderit ea, illum, adipisci, veritatis rem recusandae quibusdam nam consequuntur porro
            nemo harum eos suscipit laboriosam impedit assumenda! Explicabo est doloremque cupiditate fugit repellat
            corporis, inventore, placeat corrupti quia cum dolor a, incidunt suscipit excepturi consectetur! Ratione,
            quis. Repellat delectus esse odit nisi cupiditate similique consequatur voluptatibus quasi culpa unde
            maiores sed odio aspernatur itaque libero, aperiam natus rem dolorum amet praesentium tempore pariatur! Quo,
            a nihil, quidem quisquam deleniti sit maxime exercitationem non amet odio inventore? Provident dicta debitis
            placeat eum molestiae possimus libero, officia quas ipsa blanditiis dolorem reprehenderit. Laudantium
            incidunt dolorem nostrum nobis fuga beatae! Quod provident, cum vel voluptates iste accusamus voluptatibus,
            ut dignissimos nobis autem ad, officiis quam maxime necessitatibus. Eaque nesciunt, voluptate voluptatum
            accusantium, iste deserunt fuga excepturi quae amet dolorem, autem soluta adipisci enim? Omnis optio dolor,
            amet aspernatur nam similique repudiandae impedit autem quidem odio sapiente accusamus minima nostrum?
            Praesentium nobis nulla blanditiis! Cumque, repudiandae mollitia! Minus aliquid expedita, ex voluptatem,
            possimus, suscipit fuga accusantium corrupti aliquam quis quam ratione ipsam? Neque beatae fugiat accusamus
            labore, magni quasi unde eligendi pariatur voluptates quos nemo iste sequi commodi sint quod voluptatibus ab
            perspiciatis at similique quas numquam, doloremque quidem vero laudantium. Ad eius esse doloremque beatae
            officia, possimus tenetur magni totam harum labore ullam aperiam nobis earum voluptatem, expedita laboriosam
            maiores. Quos placeat repellat quae consectetur eaque possimus error dolores quas excepturi aspernatur
            maxime at, iste beatae quam nulla, officia soluta tempora accusantium odit praesentium repudiandae!
            Asperiores accusamus omnis, minus suscipit velit voluptates aut ducimus id repellendus nesciunt quidem ipsum
            quas praesentium provident rem quaerat laborum quibusdam mollitia. Eligendi tempore nisi quasi dignissimos
            laborum error sint accusantium, porro sapiente deleniti. Ipsa dolores magnam deserunt labore totam optio,
            doloremque reiciendis quo dignissimos consequatur, quis rerum ut reprehenderit rem ullam nemo suscipit
            numquam vitae tempore provident at, consectetur fuga! Saepe necessitatibus quidem voluptates, laborum
            impedit ipsam commodi nesciunt et officiis sit eligendi, quis, quas veniam explicabo distinctio aperiam?
            Rerum voluptas sequi cumque! Adipisci exercitationem odit itaque dolorem deleniti impedit ipsam dolorum ex
            nihil incidunt non vitae nostrum facere veritatis voluptatibus consequatur recusandae officia eaque nemo
            tenetur voluptates temporibus, in corrupti qui. Libero, totam eum eius accusantium itaque fuga adipisci
            dolorem cupiditate excepturi facilis eligendi id voluptate atque fugit necessitatibus dolorum sit eveniet
            minima voluptatum? Sunt, nulla, perferendis praesentium enim ullam neque rerum quidem, architecto qui
            suscipit distinctio ex modi? Nam, sequi ipsum amet natus dicta velit, temporibus error, tempora itaque
            officia facilis corrupti blanditiis deserunt tenetur quibusdam optio! Odit, maxime, ab ducimus perferendis
            possimus perspiciatis explicabo nihil in dicta minus vero voluptatem reiciendis aut quo cumque quos
            asperiores, porro numquam. Id, commodi quaerat!</p>
    </div>

    <div class="smalll-box">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, explicabo cupiditate accusantium nulla ipsa
            modi atque vel nemo quod a officia, dignissimos reprehenderit consequuntur est deleniti exercitationem
            voluptatibus consectetur! Ipsam nemo animi praesentium aspernatur, necessitatibus ducimus distinctio maxime
            sit delectus sunt optio rem incidunt nobis est soluta velit qui voluptates similique perferendis quidem
            reprehenderit! Quas sunt amet saepe? Rem et reiciendis veritatis molestiae eos eveniet tempora fugit
            delectus natus voluptates dolorum neque repellendus unde voluptas voluptate ex architecto accusantium
            dolorem labore minima dolore, saepe voluptatum in. A sequi ratione, earum excepturi fugiat temporibus saepe
            obcaecati quae amet! Sit dolorem quam omnis nobis quasi officiis ea delectus minus excepturi, consequatur
            facilis, aut earum illo quis ut consequuntur maiores nostrum voluptates corrupti nihil est voluptatem
            impedit et. At rem obcaecati quibusdam minus totam perferendis iure quo vel exercitationem neque fugit
            aspernatur debitis, a ipsum eius molestias ab ex. Fugit labore possimus, laboriosam quod deserunt voluptate
            non dolores excepturi voluptas itaque libero id! Voluptatibus eius sit saepe non velit ipsam nulla
            consequatur. Quia, necessitatibus? Itaque qui fuga nihil perspiciatis nam eos, tempora numquam repellat
            obcaecati, dolor saepe reprehenderit. Quaerat deserunt fugit nam. Est repellendus consectetur harum
            accusamus vitae ad, voluptatem, iusto sint esse, quasi culpa cum incidunt! Ex accusantium inventore dolorum
            quod illo labore aperiam consectetur cumque quis veniam, et ea. Porro nemo culpa error, dolorem dignissimos
            ducimus aliquid expedita, asperiores totam, eos labore soluta veritatis explicabo quo pariatur! Esse
            necessitatibus repellendus mollitia at, aliquid culpa excepturi dignissimos, odit, sint consectetur libero
            tempora atque unde debitis accusantium et nemo incidunt! Veritatis, tenetur. Consequatur, reiciendis, nihil
            itaque sapiente saepe iusto nemo molestias dicta ratione suscipit odio illo vero sit, hic placeat commodi
            dolor voluptatum. Amet sit, ipsum quibusdam recusandae doloribus quis accusantium illum atque fuga explicabo
            nulla doloremque, eveniet praesentium cupiditate beatae excepturi esse minima suscipit qui vitae, ea natus
            quae expedita. Natus blanditiis molestias architecto harum sit? Iure impedit incidunt animi voluptatibus
            soluta blanditiis consectetur facere sunt ex sit molestiae deleniti mollitia, itaque corrupti repudiandae
            quas aut laboriosam eveniet. Illum saepe odit ducimus reprehenderit. Odio voluptatum ab eveniet, impedit
            nulla, ipsum sequi, corrupti quas nostrum accusamus ipsa officia commodi reprehenderit consequuntur
            explicabo. Nesciunt ipsam aspernatur ad, laudantium nihil magni aperiam placeat excepturi ex adipisci
            voluptatibus maiores inventore neque suscipit aut quia veniam, sunt a, animi odio sint tenetur quisquam
            debitis? Velit facere sapiente, dolores vitae dignissimos quaerat quasi cumque odio dolore quas dolorem.</p>
    </div>
</body>

</html>