Merge pull request #6830 from rationality6/text_truncate_fix

#6754 truncatefy fix
learningequality · May 19, 2020 · f94acb3 · f94acb3
2 parents 4c96111 + 22afae2
commit f94acb3
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/packages/kolibri-components/src/KRadioButton.vue b/packages/kolibri-components/src/KRadioButton.vue
@@ -39,14 +39,14 @@
     />
 
     <span class="text" dir="auto">
-      {{ label }}
-      <span
+      <div class="truncate-text">{{ label }}</div>
+      <div
         v-if="description"
         class="description"
         :style="[{ color: disabled ? '' : $themeTokens.annotation }, disabledStyle ]"
       >
         {{ description }}
-      </span>
+      </div>
       <slot></slot>
     </span>
 
@@ -188,17 +188,20 @@
     height: $radio-height;
   }
 
-  .text,
-  .description {
-    display: inline-block;
-  }
   .text {
+    display: inline-block;
     max-width: calc(100% - #{$radio-height});
     padding-left: 8px;
     line-height: $radio-height;
   }
+
+  .truncate-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .description {
-    width: 100%;
     font-size: 12px;
     line-height: normal;
   }