Add ... when text is too long

Hi, in this post I'm gonna show you how to add ... instead of wrapping text on multiple lines.

Here's what we're gonna be building.

Let's start by adding 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>

and 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;
}

Now the interesting part:

Add truncate class to the second card__description

<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>

and 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;
}

and that's it. You can find working pen here

Comments

[vadim]

Unless you need to support IE you can just do this:

display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;

[Dima Prohorenko]

Cool didn’t know about this. What’s the difference, your solution is just 1 line shorter?)

[vadim]

Better semantics, and will also work if you want more than one line of text to be clamped.

[Dima Prohorenko]

Ok thanks 😉