DEV Community

loading...
Cover image for Add ... when text is too long

Add ... when text is too long

sasscrafter profile image Dima Prohorenko ・2 min read

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.

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

pic
Editor guide
Collapse
ichik profile image
vadim • Edited

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

display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
Enter fullscreen mode Exit fullscreen mode
Collapse
sasscrafter profile image
Dima Prohorenko Author

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

Collapse
ichik profile image
vadim

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

Thread Thread
sasscrafter profile image
Dima Prohorenko Author

Ok thanks 😉