diff --git a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
index 0666eb1e4dc..b0ed80a585a 100644
--- a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
+++ b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
@@ -58,7 +58,7 @@ const AnnotationValue: FC<Props> = ({ annotationKey, value }) => {
 
 export const getStyles = (theme: GrafanaTheme) => ({
   well: css`
-    word-break: break-all;
+    word-break: break-word;
   `,
   link: css`
     word-break: break-all;
diff --git a/public/app/features/alerting/unified/components/Tokenize.tsx b/public/app/features/alerting/unified/components/Tokenize.tsx
index 77b217e6b9a..fae443a8257 100644
--- a/public/app/features/alerting/unified/components/Tokenize.tsx
+++ b/public/app/features/alerting/unified/components/Tokenize.tsx
@@ -18,7 +18,6 @@ function Tokenize({ input, delimiter = ['{{', '}}'] }: TokenizerProps) {
   const styles = useStyles2(getStyles);
 
   const [open, close] = delimiter;
-  const normalizedIput = normalizeInput(input);
 
   /**
    * This RegExp uses 2 named capture groups, text that comes before the token and the token itself
@@ -28,26 +27,31 @@ function Tokenize({ input, delimiter = ['{{', '}}'] }: TokenizerProps) {
    *  Some text {{ $labels.foo }}
    */
   const regex = new RegExp(`(?<before>.*?)(${open}(?<token>.*?)${close}|$)`, 'gm');
-
-  const matches = Array.from(normalizedIput.matchAll(regex));
+  const lines = input.split('\n');
 
   const output: React.ReactElement[] = [];
 
-  matches.forEach((match, index) => {
-    const before = match.groups?.before;
-    const token = match.groups?.token?.trim();
+  lines.forEach((line, index) => {
+    const matches = Array.from(line.matchAll(regex));
 
-    if (before) {
-      output.push(<span key={`${index}-before`}>{before}</span>);
-    }
+    matches.forEach((match, index) => {
+      const before = match.groups?.before;
+      const token = match.groups?.token?.trim();
 
-    if (token) {
-      const type = tokenType(token);
-      const description = type === TokenType.Variable ? token : '';
-      const tokenContent = `${open} ${token} ${close}`;
+      if (before) {
+        output.push(<span key={`${index}-before`}>{before}</span>);
+      }
 
-      output.push(<Token key={`${index}-token`} content={tokenContent} type={type} description={description} />);
-    }
+      if (token) {
+        const type = tokenType(token);
+        const description = type === TokenType.Variable ? token : '';
+        const tokenContent = `${open} ${token} ${close}`;
+
+        output.push(<Token key={`${index}-token`} content={tokenContent} type={type} description={description} />);
+      }
+    });
+
+    output.push(<br key={`${index}-newline`} />);
   });
 
   return <span className={styles.wrapper}>{output}</span>;
@@ -68,7 +72,6 @@ interface TokenProps {
 
 function Token({ content, description, type }: TokenProps) {
   const styles = useStyles2(getStyles);
-  const varName = content.trim();
 
   const disableCard = Boolean(type) === false;
 
@@ -83,16 +86,12 @@ function Token({ content, description, type }: TokenProps) {
       }
     >
       <span>
-        <Badge className={styles.token} text={varName} color={'blue'} />
+        <Badge className={styles.token} text={content} color={'blue'} />
       </span>
     </HoverCard>
   );
 }
 
-function normalizeInput(input: string) {
-  return input.replace(/\s+/g, ' ').trim();
-}
-
 function isVariable(input: string) {
   return VARIABLES.some((character) => input.startsWith(character));
 }
@@ -122,9 +121,7 @@ function tokenType(input: string) {
 
 const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
-    display: inline-flex;
-    align-items: center;
-    white-space: pre;
+    white-space: pre-wrap;
   `,
   token: css`
     cursor: default;