Skip to content

Instantly share code, notes, and snippets.

@abraaoduarte

abraaoduarte/gist:0ae395862e3d7706fb8ba9dcc10c95d2

Created May 5, 2021 18:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abraaoduarte/0ae395862e3d7706fb8ba9dcc10c95d2 to your computer and use it in GitHub Desktop.
Save abraaoduarte/0ae395862e3d7706fb8ba9dcc10c95d2 to your computer and use it in GitHub Desktop.
Download ZIP
Truncates text with an ellipsis
Raw
gistfile1.txt
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8" />
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width" />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-truncate-text" src="https://cdn.ampproject.org/v0/amp-truncate-text-0.1.js"></script>
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
</head>
<body>
<amp-truncate-text layout="responsive" height="40em" width="40em">
<figure>
<amp-img alt="Lorem ipsum dolor sit amet" height="480" width="620" layout="responsive" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</amp-img>
<figcaption>Lorem ipsum dolor sit amet</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultrices eleifend viverra. In in blandit urna. Sed viverra iaculis varius. Nullam pellentesque placerat volutpat.</p>
<p>Aliquam est diam, pretium ut vestibulum at, rhoncus eget ante. Sed et tempor diam, et commodo lacus. Donec ligula turpis, euismod a pharetra vitae, sagittis ut sem. Phasellus hendrerit ut orci a accumsan. Nam vitae orci eget nibh lacinia gravida.</p>
<aside><strong>learn more</strong>
<section class="card">
<div>
<header>
<h4>
<a href="https://www.lipsum.com/feed/html">Sed consequat blandit ex, ac tempor est viverra vitae</a>
</h4>
</header>
</div>
</section>
</aside>
<p>Fusce efficitur tempus nunc, quis imperdiet quam cursus nec. Donec lobortis dui quis diam feugiat, vitae pellentesque lectus tristique. </p>
<p>Vestibulum lacinia pellentesque augue, nec euismod nibh luctus non. Maecenas nunc justo, consectetur vitae dignissim tristique, euismod id libero. Proin ullamcorper rhoncus orci non molestie. Sed sit amet odio rutrum, facilisis lectus ut, auctor diam.</p>
<figure>
<amp-img alt="Phasellus dignissim blandit ex ut condimentum" height="800" width="620" layout="responsive" src="https://images.freeimages.com/images/small-previews/a0d/autumn-tree-1382832.jpg">
</amp-img>
<figcaption>Phasellus dignissim blandit ex ut condimentum</figcaption>
</figure>
<figure>
<amp-img alt="In eget mauris ultrices" height="800" width="620" layout="responsive" src="https://image.shutterstock.com/image-photo/unity-diversity-partnership-heart-hands-260nw-1532068016.jpg">
</amp-img>
<figcaption>In eget mauris ultrices</figcaption>
</figure>
<figure>
<amp-img alt="Nulla dignissim condimentum nulla in sagittis" height="620" width="620" layout="responsive" src="https://www.w3schools.com/w3css/img_lights.jpg">
</amp-img>
<figcaption>Nulla dignissim condimentum nulla in sagittis</figcaption>
</figure>
<button type="button" slot="collapsed" class="collapsed-button">
Leia Mais
</button>
</amp-truncate-text>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment