diff --git a/_layouts/dataset.html b/_layouts/dataset.html
index 86094d229..4fd6af7af 100644
--- a/_layouts/dataset.html
+++ b/_layouts/dataset.html
@@ -28,7 +28,14 @@
             <h1 class="dataset-title">
               <span property="dct:title">{{ page.title }}</span>
             </h1>
-            <p class="dataset-description" property="dct:description">{{ page.description }}</p>
+            <div
+              x-data="{ open: false }"
+              x-bind:class="'dataset-description desc-truncate' + (open ? ' expanded' : '')"
+              property="dct:description"
+            >
+              <p x-ref="description" class="desc-text">{{ page.description }}</p>
+              <button x-show="$refs.description.scrollHeight > $refs.description.clientHeight" class="desc-toggle" @click="open = ! open" x-text="open ? 'Show less' : 'Show more'"></button>
+            </div>
 
             <!-- Quick Info Cards -->
             <div class="quick-info">
diff --git a/css/modern-theme.css b/css/modern-theme.css
index b8daf1395..b812296b8 100644
--- a/css/modern-theme.css
+++ b/css/modern-theme.css
@@ -616,6 +616,10 @@ body {
   font-size: 15px;
   color: var(--color-text-secondary);
   line-height: 1.6;
+  margin-bottom: 0;
+}
+
+.dataset-card .desc-truncate {
   margin-bottom: 20px;
 }
 
@@ -1336,3 +1340,39 @@ body {
 .mb-2 { margin-bottom: var(--spacing-md); }
 .mb-3 { margin-bottom: var(--spacing-lg); }
 .mb-4 { margin-bottom: var(--spacing-xl); }
+
+/* ====================================
+   17. Description Truncation
+   ==================================== */
+.desc-truncate {
+  position: relative;
+}
+
+.desc-truncate .desc-text {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  transition: all 0.2s ease;
+}
+
+.desc-truncate.expanded .desc-text {
+  -webkit-line-clamp: unset;
+  display: block;
+}
+
+.desc-toggle {
+  display: inline-block;
+  margin-top: 6px;
+  font-size: 13px;
+  color: var(--color-primary, #2563eb);
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  font-weight: 500;
+}
+
+.desc-toggle:hover {
+  text-decoration: underline;
+}
diff --git a/index.html b/index.html
index 9878283a1..a3151645f 100644
--- a/index.html
+++ b/index.html
@@ -730,7 +730,15 @@ <h3>
                 <i class="fa fa-magic" aria-hidden="true"></i> Semantic
               </span>
             </h3>
-            <p class="card-description" x-text="dataset.metadata.description || ''"></p>
+            <div
+              x-data="{ open: false }"
+              x-bind:class="'desc-truncate' + (open ? ' expanded' : '')"
+            >
+              <p class="card-description desc-text"
+                 x-ref="description"
+                 x-text="dataset.metadata.description || ''"></p>
+              <button x-show="$refs.description.scrollHeight > $refs.description.clientHeight" class="desc-toggle" @click="open = ! open" x-text="open ? 'Show less' : 'Show more'"></button>
+            </div>
 
             <div class="card-footer">
               <div class="meta-item" x-show="dataset.metadata.creator && dataset.metadata.creator.name">