diff --git a/public/app/plugins/datasource/tempo/datasource.test.ts b/public/app/plugins/datasource/tempo/datasource.test.ts
index 737feaa4851..6e51e5511b1 100644
--- a/public/app/plugins/datasource/tempo/datasource.test.ts
+++ b/public/app/plugins/datasource/tempo/datasource.test.ts
@@ -762,6 +762,19 @@ describe('Tempo service graph view', () => {
     ]);
   });
 
+  it('should escape span with multi line content correctly', () => {
+    const spanContent = [
+      `
+      SELECT * from "my_table"
+      WHERE "data_enabled" = 1
+      ORDER BY "name" ASC`,
+    ];
+    let escaped = getEscapedRegexValues(getEscapedValues(spanContent));
+    expect(escaped).toEqual([
+      '\\n      SELECT \\\\* from \\"my_table\\"\\n      WHERE \\"data_enabled\\" = 1\\n      ORDER BY \\"name\\" ASC',
+    ]);
+  });
+
   it('should get field config correctly', () => {
     let datasourceUid = 's4Jvz8Qnk';
     let tempoDatasourceUid = 'EbPO1fYnz';
diff --git a/public/app/plugins/datasource/tempo/datasource.ts b/public/app/plugins/datasource/tempo/datasource.ts
index 67b7e708a19..4c926300cb3 100644
--- a/public/app/plugins/datasource/tempo/datasource.ts
+++ b/public/app/plugins/datasource/tempo/datasource.ts
@@ -1168,7 +1168,7 @@ export function getEscapedRegexValues(values: string[]) {
 }
 
 export function getEscapedValues(values: string[]) {
-  return values.map((value: string) => value.replace(/["\\]/g, '\\$&'));
+  return values.map((value: string) => value.replace(/["\\]/g, '\\$&').replace(/[\n]/g, '\\n'));
 }
 
 export function getFieldConfig(