andy-h
1/6/2016 - 9:26 PM

An absolutely-positioned ellipsis displays when a multi-line box overflows.

An absolutely-positioned ellipsis displays when a multi-line box overflows.

/*
<div class="ellipsis"><div class="ellipsis-content">
  Content goes here.
</div><div class="ellipsis-clear"></div></div>
*/

.ellipsis {
	display: block;
	line-height: 1.25;
	max-height: 2.5em;  /* line-height * number of lines */
	overflow: hidden;
	position: relative;
	white-space: normal;
	word-wrap: break-word;
	
	background-color: #FFF;
}
.ellipsis-content {
	display:block;
	background-color:inherit;
}
.ellipsis-content::before {
	content: "…";
	position: absolute;
	top: 1.25em;  /* line-height * (number of lines - 1) */
	right: 0;
	background-color: inherit;
	padding-left: 0.25em;
}
.ellipsis-content::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: inherit;
}
.ellipsis-clear {
	display:block;
	position:relative;
	height: 100%;
	background-color: inherit;
}