Add ... when text is too long
Tags: css, html, beginners, codenewbie
Published: 2021-03-19 13:59:34

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui25i7ozrj342ddiz16l.png)

Let's start by adding html
```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
```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
```html
<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
```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](https://codepen.io/SassCrafter/pen/bGBPzvX?editors=0100)