# 2 Simple ways you can truncate text using CSS

As part of this blog lets see two ways in which you can truncate a text using CSS


### 1) Truncate a single line text using ellipsis


```
.truncate-ellipsis {
  width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
``` 


With text-overflow , ellipsis can be applied to single line of text, provided the following conditions are met. [ For truncating after multiple lines, keep reading  😉 ].
- the element  must have 
> width , max-width or flex-basis(if using flex)
- the element must have property 
> word-wrap: nowrap  
- *overflow* property should have *value other than visible* . 
> eg: overflow: hidden;
- must have display value as *block, inline-block* or any other equivalent such as flex item etc.  display:inline will not work here.
> eg: display: inline-block;

Did you know that you can reverse the direction of the truncation using the CSS direction property? 

```
direction: rtl; //show from right to left
``` 
The direction property will truncate the text in the start of the line and show the end of the paragraph instead. 


![Truncate text single line with direction right to left](https://cdn.hashnode.com/res/hashnode/image/upload/v1623787455986/A4m1zQ3hmX.png)



### 2) Truncate text after multiple lines using line-clamp

```
.truncate-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; 
  width: 250px;
  overflow: hidden;
}
``` 

With line-clamp text can be truncated after multiple lines, whats even more interesting is you can truncate it by specifying the line number where you want to truncate it.
eg: -webkit-line-clamp: 3; will truncate start truncating the text from the third line.

Below are the list of conditions which should be met in order to make this work.
- *display* property should be *webkit-box*
> eg: display: -webkit-box;
- webkit-line-clamp value should be specified , value should be greater than 0.
> eg: webkit-line-clamp: 3;
-   box-orient should be set to vertical 
> eg: -webkit-box-orient: vertical;
- *overflow* property should have *value hidden* . 
> eg: overflow: hidden;

**Browser Compatability:** webkit-line-clamp at the moment is not supported in IE.
For detailed information refer:  [caniuse.com](https://caniuse.com/?search=webkit-line-clamp) 

### Codepen: 
The below codepen will show you a live preview of the above two methods will look.

%[https://codepen.io/kpattalam/pen/jOBXvyg]



### References - MDN docs
-  [webkit-line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) 
- [white-space: nowrap](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
- [ text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)

Lets connect on  [Twitter](https://twitter.com/KritikaPattalam)  | [LinkedIn](https://www.linkedin.com/in/kritika-p-296739155/) for more web development related chats.