추가 ... 텍스트가 너무 길면

안녕하세요, 이 게시물에서는 텍스트를 여러 줄로 묶는 대신 ...을 추가하는 방법을 보여드리겠습니다.

다음은 우리가 만들 것입니다.



HTML을 추가하여 시작하겠습니다.

<div class="container">
    <div class="card">
        <div class="card__image">
            <img src="https://lekorna.com/images/products/yummy-cup2.png" alt="">
        </div>
        <div class="card__content">
            <p class="card__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum facilis voluptatem impedit nemo consequatur voluptates ipsum a voluptas quo deserunt?</p>
            <p class="card__price">35.99$</p>
            <a href="#" class="btn">Buy</a>
        </div>
    </div>
    <div class="card">
        <div class="card__image">
            <img src="https://lekorna.com/images/products/yummy-cup2.png" alt="">
        </div>
        <div class="card__content">
            <p class="card__description truncate">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum facilis voluptatem impedit nemo consequatur voluptates ipsum a voluptas quo deserunt?</p>
            <p class="card__price">35.99$</p>
            <a href="#" class="btn">Buy</a>
        </div>
    </div>
</div>

그리고 CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
        /* Center the container */
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
}

img {
    max-width: 100%;
}
.container {
    width: 100%;
    max-width: 800px;
    display: flex;
        /* Flex items will wrap on to new line if the can't fit */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.card {
    width: 45%;
    min-width: 350px;
    padding: 5px;
    display: flex;
    aling-items: flex-start;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

.card__image {
    width: 40%;
}

.card__content {
    width: 60%;
    padding-top: 20px;
}
.card__description {
    margin-bottom: 10px;
}

.card__price {
    font-size: 18px;
    color: teal;
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    padding: 8px 25px;
    font-size: 1rem;
    text-decoration: none;
    background-color: cadetblue;
    color: white;
    border-radius: 5px;
    transition: opacity 400ms linear;
}

.btn:hover {
    opacity: 0.8;
}

이제 흥미로운 부분:
두 번째 card__description에 truncate 클래스 추가

<div class="card">
        <div class="card__image">
            <img src="https://lekorna.com/images/products/yummy-cup2.png" alt="">
        </div>
        <div class="card__content">
            <!-- Right here -->
            <p class="card__description truncate">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum facilis voluptatem impedit nemo consequatur voluptates ipsum a voluptas quo deserunt?</p>
            <p class="card__price">35.99$</p>
            <a href="#" class="btn">Buy</a>
        </div>
    </div>

그리고 CSS

.truncate {
    /* Avoids text being rendered outside the container */
    width: 100%;
    overflow: hidden;
    /* Avoid text going to multiple lines */
    white-space: nowrap;
    /* Sets the ... once the text overflows */
    text-overflow: ellipsis;
}

그리고 그게 다야. 작동하는 펜here을 찾을 수 있습니다.