diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 7e2171ab..c318bad5 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -47,7 +47,12 @@ export function ContractCard(props: {
         <Spacer h={3} />
 
         <Row className="justify-between gap-4">
-          <p className="font-medium text-indigo-700">{question}</p>
+          <p
+            className="font-medium text-indigo-700 break-words"
+            style={{ /* For iOS safari */ wordBreak: 'break-word' }}
+          >
+            {question}
+          </p>
           <ResolutionOrChance className="items-center" contract={contract} />
         </Row>
       </div>
diff --git a/web/components/site-link.tsx b/web/components/site-link.tsx
index d1dbca10..79f43118 100644
--- a/web/components/site-link.tsx
+++ b/web/components/site-link.tsx
@@ -12,9 +12,10 @@ export const SiteLink = (props: {
     <a
       href={href}
       className={clsx(
-        'z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
+        'break-words z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
         className
       )}
+      style={{ /* For iOS safari */ wordBreak: 'break-word' }}
       onClick={(e) => e.stopPropagation()}
     >
       {children}
@@ -23,9 +24,10 @@ export const SiteLink = (props: {
     <Link href={href}>
       <a
         className={clsx(
-          'z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
+          'break-words z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
           className
         )}
+        style={{ /* For iOS safari */ wordBreak: 'break-word' }}
         onClick={(e) => e.stopPropagation()}
       >
         {children}