Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay
Last active July 29, 2020 08:23
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save JeffreyWay/1dab2cae278cda901cb2a0c481e0663a to your computer and use it in GitHub Desktop.
Save JeffreyWay/1dab2cae278cda901cb2a0c481e0663a to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>CSS Quirks</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<style>
.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.clamp.two-lines {
-webkit-line-clamp: 2;
}
.clamp.three-lines {
-webkit-line-clamp: 3;
}
</style>
</head>
<body class="py-4">
<div class="max-w-lg mx-auto bg-gray-300 p-4">
<?php foreach (range(1, 10) as $i) : ?>
<div class="bg-white p-4 rounded mb-4">
<h1 class="font-bold mb-2 text-lg">A New Post</h1>
<p class="text-sm clamp three-lines">
<?php echo str_repeat('Lorem ipsum dolor sit amet, consectetur adipiscing elit. ', $i) ?>
</p>
</div>
<?php endforeach; ?>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment