diff --git a/static/app.js b/static/app.js index bdac5b1..3d3ba8c 100644 --- a/static/app.js +++ b/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"; diff --git a/static/styles.css b/static/styles.css index 551f71c..f4d928b 100644 --- a/static/styles.css +++ b/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; + } +} diff --git a/templates/index.html b/templates/index.html index 58bc940..1592d0e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -49,15 +49,15 @@ {% endif %} />
-
{{ link.title or link.url }}
-

+

{{ link.title or link.url }}
+

{{ link.description or "설명 없음" }}

원문 보기