如何修復figcaptions中的字符限制？ 網格畫廊

Question

我試圖修復 figcaption 但沒有結果。 有什么問題？

<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/

嘗試編輯此代碼，在圖形上使用 div ？ 什么是解決方案？

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>