diff --git a/resources/assets/src/components/ClosetItem.vue b/resources/assets/src/components/ClosetItem.vue
index 34bb3932..d0e52c80 100644
--- a/resources/assets/src/components/ClosetItem.vue
+++ b/resources/assets/src/components/ClosetItem.vue
@@ -6,7 +6,7 @@
     <div class="card-footer pb-2 pt-2 pl-1 pr-1">
       <div class="container d-flex justify-content-between">
         <span data-test="name" :title="name">
-          {{ textureName }} <small>({{ type }})</small>
+          {{ textureName|truncate }} <small>({{ type }})</small>
         </span>
 
         <a class="float-right dropdown">
@@ -43,6 +43,7 @@
 <script>
 import setAsAvatar from './mixins/setAsAvatar'
 import removeClosetItem from './mixins/removeClosetItem'
+import truncateText from './mixins/truncateText'
 import { showModal, toast } from '../scripts/notify'
 import { truthy } from '../scripts/validators'
 
@@ -51,6 +52,7 @@ export default {
   mixins: [
     removeClosetItem,
     setAsAvatar,
+    truncateText,
   ],
   props: {
     tid: {
diff --git a/resources/assets/src/components/SkinLibItem.vue b/resources/assets/src/components/SkinLibItem.vue
index 5fdbe7af..601ea1c5 100644
--- a/resources/assets/src/components/SkinLibItem.vue
+++ b/resources/assets/src/components/SkinLibItem.vue
@@ -10,7 +10,7 @@
       <div class="card-footer pb-0 pt-2 pl-1 pr-1">
         <div class="container d-flex justify-content-between">
           <p>
-            <span :title="name">{{ name }}
+            <span :title="name">{{ name|truncate }}
               <small>{{ $t('skinlib.filter.' + type) }}</small>
             </span>
           </p>
@@ -35,12 +35,14 @@
 <script>
 import addClosetItem from './mixins/addClosetItem'
 import removeClosetItem from './mixins/removeClosetItem'
+import truncateText from './mixins/truncateText'
 
 export default {
   name: 'SkinLibItem',
   mixins: [
     addClosetItem,
     removeClosetItem,
+    truncateText,
   ],
   props: {
     tid: Number,
diff --git a/resources/assets/src/components/mixins/truncateText.ts b/resources/assets/src/components/mixins/truncateText.ts
new file mode 100644
index 00000000..ea5a645d
--- /dev/null
+++ b/resources/assets/src/components/mixins/truncateText.ts
@@ -0,0 +1,9 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  filters: {
+    truncate(text: string = ''): string {
+      return text.length > 15 ? `${text.slice(0, 15)}...` : text
+    },
+  },
+})
diff --git a/resources/assets/src/views/skinlib/Show.vue b/resources/assets/src/views/skinlib/Show.vue
index fd19261c..49b9829b 100644
--- a/resources/assets/src/views/skinlib/Show.vue
+++ b/resources/assets/src/views/skinlib/Show.vue
@@ -91,7 +91,7 @@
               <tr>
                 <td v-t="'skinlib.show.name'" />
                 <td>
-                  {{ name.length > 15 ? `${name.slice(0, 15)}...` : name }}
+                  {{ name|truncate }}
                   <small v-if="hasEditPermission">
                     <a v-t="'skinlib.show.edit'" href="#" @click="changeTextureName" />
                   </small>
@@ -213,6 +213,7 @@ import setAsAvatar from '../../components/mixins/setAsAvatar'
 import addClosetItem from '../../components/mixins/addClosetItem'
 import removeClosetItem from '../../components/mixins/removeClosetItem'
 import emitMounted from '../../components/mixins/emitMounted'
+import truncateText from '../../components/mixins/truncateText'
 import ApplyToPlayerDialog from '../../components/ApplyToPlayerDialog.vue'
 import { showModal, toast } from '../../scripts/notify'
 import { truthy } from '../../scripts/validators'
@@ -229,6 +230,7 @@ export default {
     addClosetItem,
     removeClosetItem,
     setAsAvatar,
+    truncateText,
   ],
   props: {
     baseUrl: {
diff --git a/resources/assets/tests/components/ClosetItem.test.ts b/resources/assets/tests/components/ClosetItem.test.ts
index cce4bba4..d2181573 100644
--- a/resources/assets/tests/components/ClosetItem.test.ts
+++ b/resources/assets/tests/components/ClosetItem.test.ts
@@ -122,3 +122,10 @@ test('no avatar option if texture is cape', () => {
   const wrapper = mount(ClosetItem, { propsData: factory({ type: 'cape' }) })
   expect(wrapper.findAll('.dropdown-item')).toHaveLength(3)
 })
+
+test('truncate too long texture name', () => {
+  const wrapper = mount(ClosetItem, {
+    propsData: factory({ name: 'very-very-long-texture-name' }),
+  })
+  expect(wrapper.text()).toContain('very-very-long-...')
+})
diff --git a/resources/assets/tests/components/SkinLibItem.test.ts b/resources/assets/tests/components/SkinLibItem.test.ts
index 8a89d94b..fedc2357 100644
--- a/resources/assets/tests/components/SkinLibItem.test.ts
+++ b/resources/assets/tests/components/SkinLibItem.test.ts
@@ -102,3 +102,12 @@ test('add to closet', async () => {
   await flushPromises()
   expect(wrapper.emitted('like-toggled')[0]).toEqual([true])
 })
+
+test('truncate too long texture name', () => {
+  const wrapper = mount(SkinLibItem, {
+    propsData: {
+      name: 'very-very-long-texture-name',
+    },
+  })
+  expect(wrapper.text()).toContain('very-very-long-...')
+})
diff --git a/resources/misc/changelogs/en/5.0.0.md b/resources/misc/changelogs/en/5.0.0.md
index 5fdfef73..5cdf3ce6 100644
--- a/resources/misc/changelogs/en/5.0.0.md
+++ b/resources/misc/changelogs/en/5.0.0.md
@@ -30,6 +30,7 @@
 - Fixed that error page doesn't display when using an unsupported hash algorithm.
 - Fixed fallback when unknown locale is detected.
 - Fixed compatibility with PHP 7.4.
+- Fixed the display problem for too long texture name.
 
 ## Removed
 
diff --git a/resources/misc/changelogs/zh_CN/5.0.0.md b/resources/misc/changelogs/zh_CN/5.0.0.md
index abdf91b8..c81359ae 100644
--- a/resources/misc/changelogs/zh_CN/5.0.0.md
+++ b/resources/misc/changelogs/zh_CN/5.0.0.md
@@ -30,6 +30,7 @@
 - 当使用了不支持的密码加密算法时，错误页面没有正确显示的问题
 - 修复不能针对未知语言进行降级的问题
 - 与 PHP 7.4 的兼容问题
+- 材质名过长时的显示问题
 
 ## 移除