Skip to content
Snippets Groups Projects
Unverified Commit 0c9945d9 authored by Chocobozzz's avatar Chocobozzz
Browse files

Try to fix multiline ellipsis

some characters like "g" were cut out
parent 11dd0c2e
No related branches found
No related tags found
No related merge requests found
......@@ -2,11 +2,8 @@
@import '_mixins';
@mixin miniature-name {
@include ellipsis-multiline(
$font-size: 1rem,
$line-height: 1,
$lines-to-show: 2
);
@include ellipsis-multiline(16px, 2);
transition: color 0.2s;
font-size: 16px;
font-weight: $font-semibold;
......
......@@ -24,22 +24,16 @@
overflow: hidden;
text-overflow: ellipsis;
}
/**
* This mixin will crop text in block for needed amount of lines and put ellipsis at the end
*
* @param $font-size font-size property
* @param $line-height line-height property
* @param $lines-to-show amount of lines to show
*/
@mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) {
@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
display: block;
/* Fallback for non-webkit */
display: -webkit-box;
max-height: $font-size * $line-height * $lines-to-show;
max-height: $font-size * $number-of-lines;
/* Fallback for non-webkit */
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
line-height: $font-size - 0.1;
-webkit-line-clamp: $number-of-lines;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment