¿Instrucciones para insertar amp-fit-text?


amp-fit-text


El componente amp-fit-text le permite gestionar el tamaño y el ajuste del texto dentro de un área determinada.

Preparar

Ingrese el script amp-fit-text justo abajo de la apertura <head>


<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>


Uso básico

En cada uno de estos ejemplos, el elemento <amp-fit-text> está anidado dentro de un bloque div gris 200x200 para demostrar diferencias en atributos y valores de diseño.

Cuando se utiliza amp-fit-text con una height, un width y un layout="responsive", el texto se escalará en la proporción proporcionada pero no excederá el tamaño de su padre.

Relación de aspecto: 1.5: 1 (3: 2)


Ejemplo

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
<div class="fixedblock">   <amp-fit-text width="300"     height="200"     layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>

Relación de aspecto: 1:1


Ejemplo

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
<div class="fixedblock">   <amp-fit-text width="200"     height="200"     layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>

El atributo min-font-size indica un tamaño mínimo para el texto. En este caso, hemos dictado un mínimo de 30, lo que hará que exceda el tamaño de su padre de bloque fijo y se trunque para ajustarse como sea apropiado.


Ejemplo

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
<div class="fixedblock">   <amp-fit-text width="300"     height="200"     layout="responsive"     min-font-size="30">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>

El atributo max-font-size indica un tamaño máximo para el texto. En este caso, hemos dictado un máximo de 10, asegurando que no llene el tamaño de su elemento padre.


Ejemplo

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
<div class="fixedblock">   <amp-fit-text width="300"     height="200"     layout="responsive"     max-font-size="10">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>

Cuando se utiliza amp-fit-text con una height determinada y el atributo layout="fixed-height", se ajustará al tamaño de su altura dada (200) y ajustará el ancho según sea necesario para mantenerse dentro de los límites de su padre envase.


Ejemplo

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
<div class="fixedblock">   <amp-fit-text height="200"     layout="fixed-height">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>




Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: