Skip to content

Instantly share code, notes, and snippets.

@wizard04wsu

wizard04wsu/ellipsis.htm

Last active November 24, 2020 21:20
Show Gist options
  • Save wizard04wsu/7c7c275e4fbab30fb15e to your computer and use it in GitHub Desktop.
Save wizard04wsu/7c7c275e4fbab30fb15e to your computer and use it in GitHub Desktop.
Download ZIP
An absolutely-positioned ellipsis displays when a multi-line box overflows.
Raw
ellipsis.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ellipsis Box</title>
<style>
:root {
--eb-max-lines: 2;
--eb-line-height: 1.25em;
--eb-max-height: calc(var(--eb-max-lines) * var(--eb-line-height));
--eb-bgcolor: #FFE;
}
.ellipsis-box {
line-height: var(--eb-line-height);
max-height: var(--eb-max-height);
height: var(--eb-max-height); /*optional*/
overflow-y: hidden;
background-color: var(--eb-bgcolor);
}
.ellipsis-box.eb-3 {
--eb-max-lines: 3;
--eb-max-height: calc(var(--eb-max-lines) * var(--eb-line-height));
}
.ellipsis-box > div {
position: relative;
background-color: inherit;
}
.ellipsis-box > div::after {
content: "…";
display: block;
position: absolute;
right: 0;
top: calc(max(var(--eb-max-height), calc(100% - var(--eb-line-height))) - 100% + var(--eb-max-height));
background-color: inherit;
box-shadow: 0 0 1em 1em var(--eb-bgcolor);
clip-path: polygon(-2em 0, 100% 0, 100% 100%, -2em 100%);
}
.grid {
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 1em;
}
.grid > div {
border: 1px solid transparent;
}
.ellipsis-box {
border-color: red !important;
}
.ellipsis-box.eb-3 {
border-color: blue !important;
}
</style>
</head>
<body>
<div class="grid">
<div>max height: <b>2 lines</b></div>
<div>max height: <b>3 lines</b></div>
<div>max height: <b>none</b></div>
<div class="ellipsis-box" style="height:auto;"><div>
height: auto
</div></div>
<div class="ellipsis-box eb-3" style="height:auto;"><div>
height: auto
</div></div>
<div></div>
<div class="ellipsis-box"><div>
height: 2 lines
</div></div>
<div class="ellipsis-box eb-3"><div>
height: 3 lines
</div></div>
<div></div>
<div class="ellipsis-box"><div>
Lorem ipsum dolor sit amet, consectetur
</div></div>
<div class="ellipsis-box eb-3"><div>
Lorem ipsum dolor sit amet, consectetur
</div></div>
<div>Lorem ipsum dolor sit amet, consectetur</div>
<div class="ellipsis-box"><div>
Lorem ipsum dolor sit amet, long word: reallyreallylongword
</div></div>
<div class="ellipsis-box eb-3"><div>
Lorem ipsum dolor sit amet, long word: reallyreallylongword
</div></div>
<div>Lorem ipsum dolor sit amet, long word: reallyreallylongword</div>
<div class="ellipsis-box"><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</div></div>
<div class="ellipsis-box eb-3"><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</div></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</div>
<div class="ellipsis-box"><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div>
<div class="ellipsis-box eb-3"><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment