diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index ef6b743d..2e6c7cb3 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -207,6 +207,10 @@ hr {
   text-overflow: ellipsis;
 }
 
+.overflow-wrap-anywhere {
+  overflow-wrap: anywhere;
+}
+
 #app {
   display: flex;
   flex-direction: column;
diff --git a/src/shared/components/community/community-link.tsx b/src/shared/components/community/community-link.tsx
index 96db808f..fee38eb2 100644
--- a/src/shared/components/community/community-link.tsx
+++ b/src/shared/components/community/community-link.tsx
@@ -61,7 +61,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
         {!this.props.hideAvatar && community.icon && showAvatars() && (
           <PictrsImage src={community.icon} icon />
         )}
-        <span>{displayName}</span>
+        <span class="overflow-wrap-anywhere">{displayName}</span>
       </>
     );
   }
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 3ce5f848..e3420855 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -336,7 +336,7 @@ export class Community extends Component<any, State> {
     return (
       <div class="mb-2">
         <BannerIconHeader banner={community.banner} icon={community.icon} />
-        <h5 class="mb-0">{community.title}</h5>
+        <h5 class="mb-0 overflow-wrap-anywhere">{community.title}</h5>
         <CommunityLink
           community={community}
           realLink