DEV Community

loading...
Cover image for 2 Simple ways you can truncate text using CSS

2 Simple ways you can truncate text using CSS

Kritika Pattalam Bharathkumar
Web Developer | I write blogs about web development, JS, CSS, web performance, accessibility.
Originally published at blog.kritikapattalam.com Updated on ・2 min read

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

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

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

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

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

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

Lets connect on Twitter | LinkedIn for more web development related tips.

Discussion (0)