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

即使文本太长(而不是仅仅剪切它)，您也可以滚动标题文本。