AMP輪播文本將被刪除

Question

這是我第一次與AMP網站合作。我的問題是旋轉木馬下面的文字會被截斷。 我已經創建了一個jsbin向你展示我的問題。

[http://jsbin.com/pemimilimi/edit?html,css,js,output][1] 

即使在ampbyexample.com上也不起作用。

https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/#dynamic-text-size

很多感謝先進的幫助！

Answer 1

這是因爲您在.carousel元素上有：max-height: 30%;。

如果你刪除它，它會佔用盡可能多的空間，但它會看起來不太好。我最好的建議是，你把它用滾動：overflow: scroll;

您的.caption CSS將是：

.carousel2 .caption { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 8px; 
    background: rgba(0, 0, 0, 0.6); 
    color: #ddd; 
    font-size: smaller; 
    max-height: 30%; 
    overflow: scroll; 
} 

這使您可以滾動，即使文本將長字幕的文本（VS只是切割它）。