Add ... when text is too long

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

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

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

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