How to fix character limit in figcaptions? grid gallery

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>