2 files changed, 26 insertions, 0 deletions

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3c420f547..75046798c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -29,6 +29,31 @@
   line-height: $font-size;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* Let space at right for dots */
+  position: relative;
+  margin-right: -1em;
+  padding-right: 1em;
+
+  /* Display dots if the max number of lines is exceeded */
+  &::before {
+    content: "...";
+    /* set position to right bottom corner of block */
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
+  /* Hide dots if the max number of lines is not exceeded */
+  &:after {
+    content: '';
+    background-color: var(--mainBackgroundColor);
+    /* set position to right bottom corner of text */
+    position: absolute;
+    right: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+  }
 }
 
 @mixin prefix($property, $parameters...) {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index f60d8ce94..cf7657550 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -69,6 +69,7 @@ $input-background-color: $bg-color;
 $input-placeholder-color: #898989;
 
 $sub-menu-margin-bottom: 30px;
+$sub-menu-margin-bottom-small-view: 10px;
 
 $activated-action-button-color: black;