fix: clamp title and description lines

harlan-zw · harlan-zw · commit 67836b0690aa · 2025-04-28T12:03:43.000+10:00
Relates to #265
diff --git a/playground/components/OgImage/CustomFont.vue b/playground/components/OgImage/CustomFont.vue
@@ -21,10 +21,10 @@ const theme = computed(() => props.themeColor || '#dbf4ff')
 <template>
   <div :style="{ fontFamily: 'optieinstein', fontWeight: 400, padding: '0 60px', width: '100%', height: '100%', backgroundColor: '#0c0c0c', backgroundImage: `linear-gradient(to bottom, ${theme}, #fff1f1)`, display: 'flex', alignItems: 'center' }">
     <div :style="{ padding: '0 30px', display: 'flex', flexDirection: 'column' }">
-      <p :style="{ fontSize: '75px', fontWeight: 'bold', marginBottom: '20px' }">
+      <p :style="{ fontSize: '75px', fontWeight: 'bold', marginBottom: '20px' }" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
         {{ title }}
       </p>
-      <p :style="{ fontSize: '35px', fontWeight: 400 }">
+      <p :style="{ fontSize: '35px', fontWeight: 400 }" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
         {{ description }}
       </p>
       <p class="inline-style">
diff --git a/playground/components/OgImage/NuxtIcon.vue b/playground/components/OgImage/NuxtIcon.vue
@@ -19,8 +19,12 @@ const containerStyles = {
 
 <template>
   <div :style="containerStyles">
-    <div>{{ title }}</div>
-    <div>{{ description }}</div>
+    <div style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+      {{ title }}
+    </div>
+    <div style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+      {{ description }}
+    </div>
     <Icon mode="svg" name="carbon:book" size="250px" class="size-30 text-blue-500/30" style="margin: 0 auto;" />
     <Icon name="carbon:star" size="250px" class="size-30 text-blue-500" style="margin: 0 auto;" />
     <Icon mode="svg" name="uil:github" size="250px" class="size-30 text-blue-500" style="margin: 0 auto;" />
diff --git a/playground/components/OgImage/Octopo.vue b/playground/components/OgImage/Octopo.vue
@@ -14,7 +14,7 @@ const isClass = computed(() => props.bgColor?.startsWith('bg-'))
 <template>
   <div class="w-full h-full flex text-white items-center justify-center" :class="isClass ? [bgColor || 'bg-blue-500'] : []" :style="{ backgroundColor: !isClass ? `#${bgColor}` : undefined }">
     {{ description }}
-    <h1 :style="{ fontSize: '70px' }">
+    <h1 :style="{ fontSize: '70px' }" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
       {{ title }}
     </h1>
   </div>
diff --git a/playground/components/OgImage/ScopedCss.vue b/playground/components/OgImage/ScopedCss.vue
@@ -16,7 +16,7 @@ const theme = computed(() => props.themeColor || '#dbf4ff')
 
 <template>
   <div class="main" :style="{ backgroundColor: theme }">
-    <h1 class="underline">
+    <h1 class="underline" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
       Hello World
     </h1>
   </div>
diff --git a/playground/components/OgImage/Tailwind.vue b/playground/components/OgImage/Tailwind.vue
@@ -13,7 +13,7 @@ const isClass = computed(() => props.bgColor?.startsWith('bg-'))
 
 <template>
   <div class="w-full h-full flex text-white items-center justify-center" :class="isClass ? [bgColor || 'bg-blue-500'] : []" :style="{ backgroundColor: !isClass ? `#${bgColor}` : undefined }">
-    <h1 :style="{ fontSize: '70px' }">
+    <h1 :style="{ fontSize: '70px' }" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
       {{ title }}
     </h1>
   </div>
diff --git a/src/runtime/app/components/Templates/Community/BrandedLogo.vue b/src/runtime/app/components/Templates/Community/BrandedLogo.vue
@@ -20,7 +20,7 @@ withDefaults(defineProps<{
     <div class="flex items-start justify-start h-full">
       <div class="flex flex-col justify-between w-full h-full p-20">
         <img :src="logo" height="50">
-        <h1 class="text-[60px] text-white font-bold text-left">
+        <h1 class="text-[60px] text-white font-bold text-left" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
           {{ title }}
         </h1>
       </div>
diff --git a/src/runtime/app/components/Templates/Community/Frame.vue b/src/runtime/app/components/Templates/Community/Frame.vue
@@ -28,14 +28,14 @@ withDefaults(defineProps<{
       :style="{ backgroundImage: `url(${image})` }"
     />
     <div class="flex flex-col items-center text-center">
-      <h1 class="flex gap-4 text-7xl font-bold">
+      <h1 class="flex gap-4 text-7xl font-bold" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
         <Icon
           v-if="icon"
           :name="icon"
         />
         {{ title }}
       </h1>
-      <p class="text-2xl max-w-3xl">
+      <p class="text-2xl max-w-3xl" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
         {{ description }}
       </p>
     </div>
diff --git a/src/runtime/app/components/Templates/Community/Nuxt.vue b/src/runtime/app/components/Templates/Community/Nuxt.vue
@@ -49,10 +49,10 @@ const description = computed(() => (props.description || '').slice(0, 200))
       <p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 v-if="title" class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
-        <span>{{ title }}</span>
+      <h1 v-if="title" class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+        {{ title }}
       </h1>
-      <p v-if="description" class="text-[32px] text-[#E4E4E7] leading-tight">
+      <p v-if="description" class="text-[32px] text-[#E4E4E7] leading-tight" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
         {{ description }}
       </p>
     </div>
diff --git a/src/runtime/app/components/Templates/Community/NuxtSeo.vue b/src/runtime/app/components/Templates/Community/NuxtSeo.vue
@@ -106,13 +106,16 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
     <div class="h-full w-full justify-between relative">
       <div class="flex flex-row justify-between items-start">
         <div class="flex flex-col w-full max-w-[65%]">
-          <h1 class="m-0 font-bold mb-[30px] text-[75px]">
+          <h1 class="m-0 font-bold mb-[30px] text-[75px]" style="display: block; text-overflow: ellipsis;" :style="{ lineClamp: description ? 2 : 3 }">
             {{ title }}
           </h1>
           <p
-            v-if="description" class="text-[35px]" :class="[
+            v-if="description"
+            class="text-[35px] leading-12"
+            :class="[
               colorMode === 'light' ? ['text-gray-700'] : ['text-gray-300'],
             ]"
+            style="display: block; line-clamp: 3; text-overflow: ellipsis;"
           >
             {{ description }}
           </p>
diff --git a/src/runtime/app/components/Templates/Community/Pergel.vue b/src/runtime/app/components/Templates/Community/Pergel.vue
@@ -34,11 +34,11 @@ const title = computed(() => props.title.slice(0, 60))
       <p v-if="headline" class="uppercase text-[24px] text-[#FEC476] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
-        <span>{{ title }}</span>
+      <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+        {{ title }}
       </h1>
-      <p class="text-[32px] text-[#E4E4E7] leading-tight">
-        {{ description.slice(0, 200) }}
+      <p class="text-[32px] text-[#E4E4E7] leading-tight" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
+        {{ description }}
       </p>
     </div>
 
diff --git a/src/runtime/app/components/Templates/Community/SimpleBlog.vue b/src/runtime/app/components/Templates/Community/SimpleBlog.vue
@@ -23,10 +23,10 @@ const website = computed(() => {
   <div class="h-full w-full flex items-start justify-start border-solid border-blue-500 border-[12px] bg-gray-50">
     <div class="flex items-start justify-start h-full">
       <div class="flex flex-col justify-between w-full h-full">
-        <h1 class="text-[80px] p-20 font-black text-left">
+        <h1 class="text-[80px] p-20 font-black text-left" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
           {{ title }}
         </h1>
-        <p class="text-2xl pb-10 px-20 font-bold mb-0">
+        <p class="text-2xl pb-10 px-20 font-bold mb-0" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
           {{ website }}
         </p>
       </div>
diff --git a/src/runtime/app/components/Templates/Community/UnJs.vue b/src/runtime/app/components/Templates/Community/UnJs.vue
@@ -40,11 +40,17 @@ const description = computed(() => (props.description || '').slice(0, 200))
       <div class="flex flex-row justify-between">
         <div class="max-w-[700px]">
           <h1 class="mb-[30px] max-w-[700px] text-[60px] text-gray-900 font-normal flex flex-row">
-            <span>{{ org }}</span>
-            <span v-if="repo" class="ml-2">/</span>
-            <span v-if="repo" class="ml-2 font-bold">{{ repo }}</span>
+            <p style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;">
+              {{ org }}
+            </p>
+            <p v-if="repo" style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;" class="ml-2">
+              /
+            </p>
+            <p v-if="repo" style="display: block; overflow: hidden; line-clamp: 1; text-overflow: clip;" class="ml-2 font-bold">
+              {{ repo }}
+            </p>
           </h1>
-          <p class="text-gray-500 max-w-[700px] text-[35px] leading-[60px]">
+          <p class="text-gray-500 max-w-[700px] text-[35px] leading-[60px]" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
             {{ description }}
           </p>
         </div>
diff --git a/src/runtime/app/components/Templates/Community/Wave.vue b/src/runtime/app/components/Templates/Community/Wave.vue
@@ -12,7 +12,7 @@ withDefaults(defineProps<{
 
 <template>
   <div class="h-full w-full flex items-start justify-start bg-yellow-50 relative">
-    <h1 class="text-7xl p-20 font-bold text-left text-gray-900">
+    <h1 class="text-7xl p-20 font-bold text-left text-gray-900" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
       {{ title }}
     </h1>
 
diff --git a/src/runtime/app/components/Templates/Community/WithEmoji.vue b/src/runtime/app/components/Templates/Community/WithEmoji.vue
@@ -19,7 +19,7 @@ withDefaults(defineProps<{
         <p class="text-[120px] mx-auto text-center font-bold mb-0">
           {{ emoji }}
         </p>
-        <h1 class="text-[60px] font-bold">
+        <h1 class="text-[60px] font-bold" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
           {{ title }}
         </h1>
       </div>
diff --git a/test/integration/dev-debugging.test.ts b/test/integration/dev-debugging.test.ts
@@ -99,10 +99,13 @@ describe('dev', () => {
                                                 "children": "Hello World",
                                                 "class": "",
                                                 "style": {
+                                                  "display": "block",
                                                   "fontSize": "75px",
                                                   "fontWeight": "700",
+                                                  "lineClamp": "3",
                                                   "margin": "0",
                                                   "marginBottom": "30px",
+                                                  "textOverflow": "ellipsis",
                                                 },
                                                 "tw": "",
                                               },
