Try to fix multiline ellipsis

some characters like "g" were cut out
This commit is contained in:
Chocobozzz 2019-04-03 13:51:02 +02:00
parent 11dd0c2e42
commit 0c9945d900
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 7 additions and 16 deletions

View File

@ -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;

View File

@ -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;