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=”ca…


This content originally appeared on DEV Community and was authored by Dima Prohorenko

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>

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


This content originally appeared on DEV Community and was authored by Dima Prohorenko


Print Share Comment Cite Upload Translate Updates
APA

Dima Prohorenko | Sciencx (2021-03-19T13:59:34+00:00) Add … when text is too long. Retrieved from https://www.scien.cx/2021/03/19/add-when-text-is-too-long/

MLA
" » Add … when text is too long." Dima Prohorenko | Sciencx - Friday March 19, 2021, https://www.scien.cx/2021/03/19/add-when-text-is-too-long/
HARVARD
Dima Prohorenko | Sciencx Friday March 19, 2021 » Add … when text is too long., viewed ,<https://www.scien.cx/2021/03/19/add-when-text-is-too-long/>
VANCOUVER
Dima Prohorenko | Sciencx - » Add … when text is too long. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/19/add-when-text-is-too-long/
CHICAGO
" » Add … when text is too long." Dima Prohorenko | Sciencx - Accessed . https://www.scien.cx/2021/03/19/add-when-text-is-too-long/
IEEE
" » Add … when text is too long." Dima Prohorenko | Sciencx [Online]. Available: https://www.scien.cx/2021/03/19/add-when-text-is-too-long/. [Accessed: ]
rf:citation
» Add … when text is too long | Dima Prohorenko | Sciencx | https://www.scien.cx/2021/03/19/add-when-text-is-too-long/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts