diff --git a/pebblo/app/pebblo-ui/src/components/snippetDetails.js b/pebblo/app/pebblo-ui/src/components/snippetDetails.js
index a55b18be..c69bd33a 100644
--- a/pebblo/app/pebblo-ui/src/components/snippetDetails.js
+++ b/pebblo/app/pebblo-ui/src/components/snippetDetails.js
@@ -8,7 +8,7 @@ import { Tooltip } from "./tooltip.js";
 
 function DisplaySnippet(props) {
   const { formattedString } = props;
-  return `<div>
+  return `<div class="word-wrap-break">
       ${formattedString.myMap((item, index) =>
         item?.score
           ? Tooltip({
diff --git a/pebblo/app/pebblo-ui/static/index.css b/pebblo/app/pebblo-ui/static/index.css
index bc8655dc..bc0eaa07 100644
--- a/pebblo/app/pebblo-ui/static/index.css
+++ b/pebblo/app/pebblo-ui/static/index.css
@@ -1127,6 +1127,10 @@ dialog::backdrop {
   border: 1px solid#D8D9E380;
 }
 
+.word-wrap-break {
+  word-wrap: break-word;
+}
+
 /* TOOLTIP */
 
 .tooltip-wrapper {