Try to fix multiline ellipsis
some characters like "g" were cut out
This commit is contained in:
parent
11dd0c2e42
commit
0c9945d900
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue