AMP Karussell Text wird abgeschnitten

Question

es ist das erste Mal, dass ich mit AMP-Sites arbeite. Mein Problem ist, dass der Text unter dem Karussell abgeschnitten wird. Ich habe eine Jsbin erstellt, um Ihnen mein Problem zu zeigen.

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

Selbst auf dem ampbyexample.com funktioniert es nicht.

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

Vielen Dank für Ihre Hilfe im fortgeschrittenen!

Answer 1

Das ist, weil Sie haben: max-height: 30%; auf dem .carousel Element.

Wenn Sie das entfernen, nimmt es so viel Platz wie nötig, aber dann sieht es nicht gut aus. Mein Rat ist, dass Sie es mit machen blättern: overflow: scroll;

Ihre CSS für .Caption wäre:

.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; 
} 

Auf diese Weise können Sie den Text der Beschriftung bewegen, auch wenn der Text zu lang ist (vs schneide es einfach).