init

static/app.js

@@ -75,15 +75,15 @@ function appendLinks(links) {
     body.className = "card-body d-flex flex-column";
 
     const title = document.createElement("h5");
-    title.className = "card-title mb-2";
+    title.className = "card-title mb-2 line-clamp-title";
     title.textContent = link.title || link.url;
 
     const description = document.createElement("p");
-    description.className = "card-text text-secondary flex-grow-1";
+    description.className = "card-text text-secondary card-description";
     description.textContent = link.description || "설명 없음";
 
     const linkBtn = document.createElement("a");
-    linkBtn.className = "btn btn-outline-primary btn-sm";
+    linkBtn.className = "btn btn-outline-primary btn-sm mt-auto";
     linkBtn.href = link.url;
     linkBtn.target = "_blank";
     linkBtn.rel = "noopener";

static/styles.css

@@ -19,3 +19,21 @@ body {
   height: 180px;
   object-fit: cover;
 }
+
+/* 웹(가로 그리드)에서 긴 요약으로 카드가 과도하게 늘어나지 않도록 모바일과 비슷한 미리보기 높이로 제한 */
+@media (min-width: 768px) {
+  .card-description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .card-title.line-clamp-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}

templates/index.html

@@ -49,15 +49,15 @@
               {% endif %}
             />
             <div class="card-body d-flex flex-column">
-              <h5 class="card-title mb-2">{{ link.title or link.url }}</h5>
-              <p class="card-text text-secondary flex-grow-1">
+              <h5 class="card-title mb-2 line-clamp-title">{{ link.title or link.url }}</h5>
+              <p class="card-text text-secondary card-description">
                 {{ link.description or "설명 없음" }}
               </p>
               <a
                 href="{{ link.url }}"
                 target="_blank"
                 rel="noopener"
-                class="btn btn-outline-primary btn-sm"
+                class="btn btn-outline-primary btn-sm mt-auto"
               >
                 원문 보기
               </a>