diff --git a/kolibri/plugins/learn/assets/src/views/content-card/index.vue b/kolibri/plugins/learn/assets/src/views/content-card/index.vue
index b626855b95e..73ba53221e7 100644
--- a/kolibri/plugins/learn/assets/src/views/content-card/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/content-card/index.vue
@@ -1,14 +1,17 @@
 <template>
 
   <router-link :to="link" class="card" :class="{ 'mobile-card': isMobile }">
-
     <card-thumbnail
       class="thumbnail"
       v-bind="{ thumbnail, progress, kind, isMobile, showContentIcon }"
     />
 
-    <h3 class="text" dir="auto">{{ title }}</h3>
-
+    <h3 class="text" dir="auto">
+      <shaved-text
+        :title="title"
+        :maxHeight="isMobile ? 40 : 60"
+      />
+    </h3>
   </router-link>
 
 </template>
@@ -20,10 +23,12 @@
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import { validateLinkObject } from 'kolibri.utils.validators';
   import cardThumbnail from './card-thumbnail';
+  import shavedText from './shaved-text';
 
   export default {
     components: {
       cardThumbnail,
+      shavedText,
     },
     props: {
       title: {
@@ -92,7 +97,7 @@
     color: $core-text-default
     overflow: hidden
     margin: 16px
-    height: 54px
+    height: 60px
 
   .mobile-card.card
     width: 100%
diff --git a/kolibri/plugins/learn/assets/src/views/content-card/shaved-text.vue b/kolibri/plugins/learn/assets/src/views/content-card/shaved-text.vue
new file mode 100644
index 00000000000..bf2a5a491b2
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/views/content-card/shaved-text.vue
@@ -0,0 +1,57 @@
+<template>
+
+  <div :title="tooltip">{{ title }}</div>
+
+</template>
+
+
+<script>
+
+  import shave from 'shave';
+  import responsiveElement from 'kolibri.coreVue.mixins.responsiveElement';
+
+  export default {
+    mixins: [responsiveElement],
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      maxHeight: {
+        type: Number,
+        required: true,
+        validator(value) {
+          return value > 0;
+        },
+      },
+    },
+    data() {
+      return {
+        hasTooltip: false,
+      };
+    },
+    computed: {
+      tooltip() {
+        if (!this.hasTooltip) {
+          return null;
+        }
+        return this.title;
+      },
+    },
+    watch: {
+      elSize: {
+        handler() {
+          shave(this.$el, this.maxHeight);
+          this.$nextTick(() => {
+            this.hasTooltip = Boolean(this.$el.querySelector('.js-shave'));
+          });
+        },
+        deep: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped></style>
diff --git a/package.json b/package.json
index 02f2efe7d89..85fda3a1f54 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "rest": "^1.3.2",
     "screenfull": "^3.3.1",
     "seededshuffle": "^0.1.1",
+    "shave": "^2.1.3",
     "typeface-noto-sans": "^0.0.54",
     "vue": "^2.3.3",
     "vue-intl": "2.1.1",
diff --git a/yarn.lock b/yarn.lock
index 3850cecdc5c..3801fbe68cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5289,6 +5289,10 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
+shave@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/shave/-/shave-2.1.3.tgz#89c7df997d35a95bc31703c9150161bc98d3fa3b"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"