diff --git a/components/collapsible-panel/collapsible-panel-summary-item.js b/components/collapsible-panel/collapsible-panel-summary-item.js
index d6653c625b4..3c5863a8b79 100644
--- a/components/collapsible-panel/collapsible-panel-summary-item.js
+++ b/components/collapsible-panel/collapsible-panel-summary-item.js
@@ -1,10 +1,8 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
 /**
  * A component for a "summary item" child component that describes the content in a collapsible panel.
@@ -35,9 +33,6 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 		.d2l-body-small {
 			line-height: 1.2rem;
 		}
-		p.truncate {
-			${getOverflowDeclarations({ lines: 1 })}
-		}
 	`];
 
 	constructor() {
@@ -47,13 +42,8 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 	}
 
 	render() {
-		const classes = {
-			'd2l-body-small': true,
-			'd2l-skeletize': true,
-			'truncate': this.lines > 0
-		};
-		const styles = (this.lines > 0) ? { '-webkit-line-clamp': this.lines } : {};
-		return html`<p class="${classMap(classes)}" style="${styleMap(styles)}">${this.text}</p>`;
+		const styles = this.lines ? getOverflowDeclarations({ lines: this.lines }) : null;
+		return html`<p class="d2l-body-small d2l-skeletize" style="${styles ?? nothing}">${this.text}</p>`;
 	}
 }
 
diff --git a/components/link/link.js b/components/link/link.js
index 2efad8909c3..2eff43f37c4 100644
--- a/components/link/link.js
+++ b/components/link/link.js
@@ -2,15 +2,14 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { _generateLinkStyles } from './link-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
 export const linkStyles = _generateLinkStyles('.d2l-link', true);
 
@@ -90,12 +89,6 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			align-items: baseline;
 			display: flex;
 		}
-		a span.truncate {
-			${getOverflowDeclarations({ lines: 1 })}
-		}
-		a span.truncate-one {
-			${overflowEllipsisDeclarations}
-		}
 		#new-window {
 			line-height: 0;
 			white-space: nowrap;
@@ -157,12 +150,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			'd2l-link-main': this.main,
 			'd2l-link-small': this.small
 		};
-		const spanClasses = {
-			'd2l-link-content': true,
-			'truncate': this.lines > 1,
-			'truncate-one': this.lines === 1
-		};
-		const styles = { webkitLineClamp: this.lines || null };
+		const styles = this.lines ? getOverflowDeclarations({ lines: this.lines }) : null;
 		const newWindowElements = (this.target === '_blank')
 			? html`<span id="new-window"><span style="font-size: 0;">&nbsp;</span><d2l-icon icon="tier1:new-window"></d2l-icon></span><span class="d2l-offscreen">${this.localize('components.link.open-in-new-window')}</span>`
 			: nothing;
@@ -186,8 +174,8 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 				tabindex="${ifDefined(this.disabled && this.disabledTooltip ? 0 : undefined)}"
 				target="${ifDefined(this.target)}"
 				><span
-					class="${classMap(spanClasses)}"
-					style="${styleMap(styles)}"><slot></slot></span>${newWindowElements}</a>${disabledTooltip}`;
+					class="d2l-link-content"
+					style="${styles ?? nothing}"><slot></slot></span>${newWindowElements}</a>${disabledTooltip}`;
 	}
 
 	#linkId = getUniqueId();
diff --git a/helpers/overflow.js b/helpers/overflow.js
index a0ef4f19a70..84f34a29093 100644
--- a/helpers/overflow.js
+++ b/helpers/overflow.js
@@ -1,22 +1,22 @@
 import { set } from './template-tags.js';
 import { unsafeCSS } from 'lit';
 
-export const overflowHiddenDeclarations = getOverflowDeclarations({});
-export const overflowEllipsisDeclarations = getOverflowDeclarations({ textOverflow: 'ellipsis' });
+export const overflowHiddenDeclarations = getOverflowDeclarations({ lines: 0 });
+export const overflowEllipsisDeclarations = getOverflowDeclarations({ textOverflow: 'ellipsis', lines: 0 });
 
-export function getOverflowDeclarations({ textOverflow = '', lines = 0, lit = true } = {}) {
+export function getOverflowDeclarations({ textOverflow = '', lines = 1, lit = true } = {}) {
 	if (!arguments.length) return overflowHiddenDeclarations;
+	if (arguments[0].lines === 1) return overflowEllipsisDeclarations;
 
 	const declarations = set`
 		min-width: 0; /* clamps width of flex items */
 		overflow-x: clip;
-		${lines
+		${lines > 1 || lines.constructor === String
 			? set`
 			display: -webkit-box;
 			overflow-clip-margin: 0.2em;
 			overflow-wrap: anywhere;
 			overflow-y: clip;
-			text-overflow: ${textOverflow || 'ellipsis'};
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: ${lines};`
 			: set`
diff --git a/helpers/test/overflow.test.js b/helpers/test/overflow.test.js
index 15e4aab9dd1..a7a12ada172 100644
--- a/helpers/test/overflow.test.js
+++ b/helpers/test/overflow.test.js
@@ -21,7 +21,7 @@ describe('overflow', () => {
 			expect(declarations).to.equal(overflowHiddenDeclarations.cssText);
 		});
 
-		it('should return line clamping declarations when lines > 0', () => {
+		it('should return line clamping declarations when lines > 1', () => {
 			const declarations = getOverflowDeclarations({ lines: 3 });
 			expect(declarations.cssText).to.equal(set`
 				min-width: 0; /* clamps width of flex items */
@@ -30,7 +30,6 @@ describe('overflow', () => {
 				overflow-clip-margin: 0.2em;
 				overflow-wrap: anywhere;
 				overflow-y: clip;
-				text-overflow: ellipsis;
 				-webkit-box-orient: vertical;
 				-webkit-line-clamp: 3;
 			`);
@@ -48,6 +47,18 @@ describe('overflow', () => {
 				white-space: nowrap;
 			`);
 		});
+
+		it('should produce overflow ellipsis declarations when lines is 1', () => {
+			const declarations = getOverflowDeclarations({ lines: 1 });
+			expect(declarations.cssText).to.equal(set`
+				min-width: 0; /* clamps width of flex items */
+				overflow-x: clip;
+				overflow-clip-margin: 1em;
+				overflow-y: visible;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			`);
+		});
 	});
 
 	describe('overflowEllipsisDeclarations', () => {