Try to fix multiline ellipsis

some characters like "g" were cut out

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 2ea4aa105614abd45ee54bdfa0fc57d386f7570d..1e9e8d7499595fb88b166db75d1d426ec361d957 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -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;

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 37bd404dd02f026a97ed02da590e50fa6346ce5e..900638a0e49a0167ccc4a1fa491a4ba96e575127 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -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;