diff --git a/core/css/header.scss b/core/css/header.scss
index a9acb90adbd..eb7c4e8dcf4 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -230,6 +230,17 @@
 	flex: 1 1 100%;
 }
 
+.header-info {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.header-title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .header-shared-by  {
 	color: var(--color-primary-element-text);
 	position: relative;
diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index 0ee81d69270..19ec4244b9f 100644
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -48,17 +48,21 @@ p($theme->getTitle());
 					<div class="logo logo-icon"></div>
 				<?php endif; ?>
 
-				<?php if (isset($template) && $template->getHeaderTitle() !== '') { ?>
-					<?php p($template->getHeaderTitle()); ?>
-				<?php } else { ?>
-					<?php	p($theme->getName()); ?>
-				<?php } ?>
-			</div>
-			<?php if (isset($template) && $template->getHeaderDetails() !== '') { ?>
-				<div class="header-shared-by">
-					<?php p($template->getHeaderDetails()); ?>
+				<div class="header-info">
+					<span class="header-title">
+						<?php if (isset($template) && $template->getHeaderTitle() !== '') { ?>
+							<?php p($template->getHeaderTitle()); ?>
+						<?php } else { ?>
+							<?php	p($theme->getName()); ?>
+						<?php } ?>
+					</span>
+					<?php if (isset($template) && $template->getHeaderDetails() !== '') { ?>
+						<span class="header-shared-by">
+							<?php p($template->getHeaderDetails()); ?>
+						</span>
+					<?php } ?>
 				</div>
-			<?php } ?>
+			</div>
 		</div>
 
 		<div class="header-right">