update: make summary absolute 3 lines to keep the cards neat
MODIFY
layout/_partial/prev-next.ejs
layout/_partial/prev-next.ejs
@@ -39,7 +39,7 @@ var featureImages = theme.featureImages;
</div>
</a>
<div class="card-content article-content">
- <div class="summary"><%- strip_html(page.prev.content).substring(0, 120) %></div>
+ <div class="summary block-with-text"><%- strip_html(page.prev.content).substring(0, 120) %></div>
<div class="publish-info">
<span class="publish-date">
<i class="fa fa-clock-o fa-fw icon-date"></i><%= date(page.prev.date, config.date_format) %>
@@ -95,7 +95,7 @@ var featureImages = theme.featureImages;
</div>
</a>
<div class="card-content article-content">
- <div class="summary"><%- strip_html(page.content).substring(0, 120) %></div>
+ <div class="summary block-with-text"><%- strip_html(page.content).substring(0, 120) %></div>
<div class="publish-info">
<span class="publish-date">
<i class="fa fa-clock-o fa-fw icon-date"></i><%= date(page.date, config.date_format) %>
@@ -153,7 +153,7 @@ var featureImages = theme.featureImages;
</div>
</a>
<div class="card-content article-content">
- <div class="summary"><%- strip_html(page.next.content).substring(0, 120) %></div>
+ <div class="summary block-with-text"><%- strip_html(page.next.content).substring(0, 120) %></div>
<div class="publish-info">
<span class="publish-date">
<i class="fa fa-clock-o fa-fw icon-date"></i><%= date(page.next.date, config.date_format) %>
@@ -209,7 +209,7 @@ var featureImages = theme.featureImages;
</div>
</a>
<div class="card-content article-content">
- <div class="summary"><%- strip_html(page.content).substring(0, 120) %></div>
+ <div class="summary block-with-text"><%- strip_html(page.content).substring(0, 120) %></div>
<div class="publish-info">
<span class="publish-date">
<i class="fa fa-clock-o fa-fw icon-date"></i><%= date(page.date, config.date_format) %>

MODIFY
layout/archive.ejs
layout/archive.ejs
</div>
</a>
<div class="card-content article-content">
- <div class="summary">
+ <div class="summary block-with-text">
<% if (post.summary && post.summary.length > 0) { %>
<%- post.summary %>
<% } else { %>

MODIFY
layout/category.ejs
layout/category.ejs
</div>
</a>
<div class="card-content article-content">
- <div class="summary">
+ <div class="summary block-with-text">
<% if (post.summary && post.summary.length > 0) { %>
<%- post.summary %>
<% } else { %>

MODIFY
layout/index.ejs
layout/index.ejs
</a>
<div class="card-content article-content">
- <div class="summary">
+ <div class="summary block-with-text">
<% if (post.summary && post.summary.length > 0) { %>
<%- post.summary %>
<% } else { %>

MODIFY
source/css/matery.css
source/css/matery.css
@@ -1747,3 +1747,47 @@ footer .copy-right {
.overflow-policy {
overflow: hidden;
}
+
+/* styles for '...' */
+.block-with-text {
+ /* hide text if it more than N lines */
+ overflow: hidden;
+ /* for set '...' in absolute position */
+ position: relative;
+ /* use this value to count block height */
+ line-height: 1.5em;
+ /* max-height = line-height (1.2) * lines max number (3) */
+ max-height: 4.5em;
+ /* fix problem when last visible word doesn't adjoin right side */
+ text-align: justify;
+ /* place for '...' */
+ margin-right: -1em;
+ padding-right: 1em;
+}
+
+/* create the ... style */
+.block-with-text:before {
+ /* points in the end */
+ content: '...';
+ /* absolute position */
+ position: absolute;
+ /* set position to right bottom corner of block */
+ right: 0;
+ bottom: 0;
+}
+
+/* hide ... if we have text, which is less than or equal to max lines */
+.block-with-text:after {
+ /* points in the end */
+ content: '';
+ /* absolute position */
+ position: absolute;
+ /* set position to right bottom corner of text */
+ right: 0;
+ /* set width and height */
+ width: 1em;
+ height: 1em;
+ margin-top: 0.2em;
+ /* bg color = bg color under block */
+ background: white;
+}

update: make summary absolute 3 lines to keep the cards neat