Skip to content

Instantly share code, notes, and snippets.

@kogakure
Last active December 18, 2019 15:00
Show Gist options
  • Save kogakure/27b6e02034bae4ed7c70 to your computer and use it in GitHub Desktop.
Save kogakure/27b6e02034bae4ed7c70 to your computer and use it in GitHub Desktop.
Pure CSS multiline text with ellipsis
/* http://martinwolf.org/2013/01/29/pure-css-multiline-text-with-ellipsis/ */
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;
h2 {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
@rares-preda
Copy link

There are some solutions and most important one of them is written in pure-css and it is cross-browser.
http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment