CSS_文字排版8

文字排版8

HTML

Code

<div class="wrap">
            <div class="container">
                <h1>CSS COKE IS AWESOME</h1>
                <div class="content">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                </div>
            </div>
        </div>

CSS

使用 position 定位，將 h1 放進文字區塊內。使用 overflow: hidden; 將超出 container 的 h1 範圍去除。
在文字區塊加上 position: relative;、z-index: 1;讓文字顯示在畫面上。

Code

// css reset
* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Noto Sans TC', sans-serif;
}

body {
    // background-color: #edece1;
    box-sizing: border-box;
}

.wrap {
    margin: 100px 0;
}

.container {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    box-shadow: 0 0 30px #ccc;
    position: relative;
    // 超出 container 的 h1 範圍去除
    overflow: hidden;
    h1 {
        width: 100%;
        // 不要收縮
        flex-shrink: 0;
        // 留白
        padding-left: 15px;
        color: #fff;
        font-size: 200px;
        // 定位
        position: absolute;
        left: 0;
        top: -30px;
        line-height: 0.7em;
        text-shadow: 6px 6px 0px #ccc;
    }
    .content {
        width: 600px;
        flex-shrink: 0;
        column-count: 2;
        column-gap: 30px;
        padding: 15px;
        // 另一種顯示下方文字方式
        position: relative;
        z-index: 1;
        p {
            margin-bottom: 1em;
            &:first-child::first-letter {
                font-size: 40px;
                float: left;
                padding-right: 10px;
            }
        }
    }
}

參考：
https://www.youtube.com/watch?v=VN-GcKUkdis&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&index=27