AMP轮播所需高度

时间:2019-04-29 15:31:43

标签: amp-html

我有一个放大器转盘,其中包含div的幻灯片,每张幻灯片上都有不同数量的文本(不是图像)。

由于每张幻灯片中的文本量和固定高度的变化,我无法获得可以响应的比率。因此,我要么显示下面所有带有大空格的文本,要么截断文本。

我正在尝试实现旋转木马的高度将根据其内部进行调整的地方。

我尝试了其他布局,但结果相同。

有人对此有办法吗?

<amp-carousel height="180" width="790" layout="responsive" type="slides">
      <div class="review">   
           1 paragraphs of text
      </div>
      <div class="review">   
           5 paragraphs of text
      </div>
      <div class="review">   
           4 paragraphs of text
      </div>
</amp-carousel>

1 个答案:

答案 0 :(得分:1)

必须指定转盘高度的原因是为了防止内容根据所选页面跳到转盘下方,因此无法避免这种情况。

一种解决方法是将高度固定并使用amp-fit-text

<amp-carousel height="500" layout="fixed-height" type="slides">
  <div class="review">
    <amp-fit-text height="500" layout="responsive">
      1 paragraphs of text
    </amp-fit-text>
  </div>
  <div class="review">
    <amp-fit-text height="500" layout="responsive">
      5 paragraphs of text
    </amp-fit-text>
  </div>
  <div class="review">
    <amp-fit-text height="500" layout="responsive">
      4 paragraphs of text
    </amp-fit-text>
  </div>
</amp-carousel>

这使您可以根据文本的垂直方向垂直居中,修改文本大小和/或剪切文本。