How to fix character limit in figcaptions? grid gallery - html

Question

I trying to fix figcaption but with no results.
whats the problem?
<style>
.items {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 40px 20px;
}
figcaption.name {
padding: 8px 15px;
text-align: center;
background: #EEE;
color: #444;
font-weight: 600;
max-height: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
figcaption.year {
background: #EEE;
color: #444;
font-weight: 100;
text-align:left;
}
#media only screen and (max-width: 1000px){.items {grid-template-columns: repeat(5, 1fr);}}
#media only screen and (max-width: 800px) {.items {grid-template-columns: repeat(4, 1fr);}}
#media only screen and (max-width: 600px) {.items {grid-template-columns: repeat(3, 1fr);}}
#media only screen and (max-width: 400px) {.items {grid-template-columns: repeat(2, 1fr);}}
</style>
https://jsfiddle.net/zup37bjv/
Trying to edit this code, use div over figure ? whats the solution?

Answer 1

p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.wrapper {
padding: 20px;
background: #eaeaea;
max-width: 400px;
margin: 50px auto;
}
.demo-1 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.demo-2 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 150px;
}
<div class="wrapper">
<p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>
<div class="wrapper">
<p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>