diff --git a/extensions/notebook-renderers/src/index.ts b/extensions/notebook-renderers/src/index.ts
index 66b6b2cb287..8954017fffc 100644
--- a/extensions/notebook-renderers/src/index.ts
+++ b/extensions/notebook-renderers/src/index.ts
@@ -199,9 +199,9 @@ function renderError(
 		const content = createOutputContent(outputInfo.id, formattedStack, outputOptions);
 		const stackTraceElement = document.createElement('div');
 		stackTraceElement.appendChild(content);
-		stackTraceElement.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
+		outputElement.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
 		disposableStore.push(ctx.onDidChangeSettings(e => {
-			stackTraceElement.classList.toggle('word-wrap', e.outputWordWrap);
+			outputElement.classList.toggle('word-wrap', e.outputWordWrap);
 		}));
 
 		if (minimalError) {
@@ -384,9 +384,9 @@ function renderStream(outputInfo: OutputWithAppend, outputElement: HTMLElement,
 		}
 
 		contentParent.classList.toggle('scrollable', outputScrolling);
-		contentParent.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
+		outputElement.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
 		disposableStore.push(ctx.onDidChangeSettings(e => {
-			contentParent!.classList.toggle('word-wrap', e.outputWordWrap);
+			outputElement.classList.toggle('word-wrap', e.outputWordWrap);
 		}));
 
 		initializeScroll(contentParent, disposableStore, scrollTop);
@@ -404,9 +404,10 @@ function renderText(outputInfo: OutputItem, outputElement: HTMLElement, ctx: IRi
 	const outputOptions = { linesLimit: ctx.settings.lineLimit, scrollable: outputScrolling, trustHtml: false, linkifyFilePaths: ctx.settings.linkifyFilePaths };
 	const content = createOutputContent(outputInfo.id, text, outputOptions);
 	content.classList.add('output-plaintext');
-	if (ctx.settings.outputWordWrap) {
-		content.classList.add('word-wrap');
-	}
+	outputElement.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
+	disposableStore.push(ctx.onDidChangeSettings(e => {
+		outputElement.classList.toggle('word-wrap', e.outputWordWrap);
+	}));
 
 	content.classList.toggle('scrollable', outputScrolling);
 	outputElement.appendChild(content);
@@ -445,7 +446,7 @@ export const activate: ActivationFunction<void> = (ctx) => {
 		white-space: pre;
 	}
 	/* When wordwrap turned on, force it to pre-wrap */
-	#container div.output_container .word-wrap span {
+	#container div.output_container .word-wrap {
 		white-space: pre-wrap;
 	}
 	#container div.output>div {
diff --git a/extensions/notebook-renderers/src/test/notebookRenderer.test.ts b/extensions/notebook-renderers/src/test/notebookRenderer.test.ts
index 07ec9cdf9ea..dfc7e2b15f8 100644
--- a/extensions/notebook-renderers/src/test/notebookRenderer.test.ts
+++ b/extensions/notebook-renderers/src/test/notebookRenderer.test.ts
@@ -152,7 +152,7 @@ suite('Notebook builtin output renderer', () => {
 			const inserted = outputElement.firstChild as HTMLElement;
 			assert.ok(inserted, `nothing appended to output element: ${outputElement.innerHTML}`);
 			assert.ok(outputElement.classList.contains('remove-padding'), `Padding should be removed for scrollable outputs ${outputElement.classList}`);
-			assert.ok(inserted.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
+			assert.ok(outputElement.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
 				`output content classList should contain word-wrap and scrollable ${inserted.classList}`);
 			assert.ok(inserted.innerHTML.indexOf('>content</') > -1, `Content was not added to output element: ${outputElement.innerHTML}`);
 		});
@@ -169,7 +169,7 @@ suite('Notebook builtin output renderer', () => {
 			const inserted = outputElement.firstChild as HTMLElement;
 			assert.ok(inserted, `nothing appended to output element: ${outputElement.innerHTML}`);
 			assert.ok(outputElement.classList.contains('remove-padding'), `Padding should be removed for non-scrollable outputs: ${outputElement.classList}`);
-			assert.ok(!inserted.classList.contains('word-wrap') && !inserted.classList.contains('scrollable'),
+			assert.ok(!outputElement.classList.contains('word-wrap') && !inserted.classList.contains('scrollable'),
 				`output content classList should not contain word-wrap and scrollable ${inserted.classList}`);
 			assert.ok(inserted.innerHTML.indexOf('>content</') > -1, `Content was not added to output element: ${outputElement.innerHTML}`);
 		});
@@ -316,7 +316,7 @@ suite('Notebook builtin output renderer', () => {
 		const inserted = outputElement.firstChild as HTMLElement;
 		assert.ok(inserted, `nothing appended to output element: ${outputElement.innerHTML}`);
 		assert.ok(outputElement.classList.contains('remove-padding'), 'Padding should be removed for scrollable outputs');
-		assert.ok(inserted.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
+		assert.ok(outputElement.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
 			`output content classList should contain word-wrap and scrollable ${inserted.classList}`);
 		assert.ok(inserted.innerHTML.indexOf('>Expected type `str`, but received type') > -1, `Content was not added to output element:\n ${outputElement.innerHTML}`);
 		assert.ok(inserted.textContent!.indexOf('Expected type `str`, but received type `<class \'int\'>`') > -1, `Content was not added to output element:\n ${outputElement.textContent}`);
@@ -465,7 +465,7 @@ suite('Notebook builtin output renderer', () => {
 		fireSettingsChange({ outputWordWrap: true, outputScrolling: true });
 
 		const inserted = outputElement.firstChild as HTMLElement;
-		assert.ok(inserted.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
+		assert.ok(outputElement.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
 			`output content classList should contain word-wrap and scrollable ${inserted.classList}`);
 	});