diff --git a/Bootstrap.Admin/Views/Shared/Header.cshtml b/Bootstrap.Admin/Views/Shared/Header.cshtml
index 7b1f8b04..eb6df729 100644
--- a/Bootstrap.Admin/Views/Shared/Header.cshtml
+++ b/Bootstrap.Admin/Views/Shared/Header.cshtml
@@ -89,7 +89,7 @@
         <div class="dropdown userinfo">
             <a data-toggle="dropdown" class="dropdown-toggle shadow-default" href="#">
                 <img id="headerIcon" alt="" src="@Url.Content(Model.Icon)">
-                <span id="userDisplayName" data-userName="@Model.UserName" class="username">@Model.DisplayName</span>
+                <span id="userDisplayName" data-userName="@Model.UserName" class="username text-truncate d-inline-block">@Model.DisplayName</span>
             </a>
             <div class="dropdown-menu dropdown-menu-right">
                 <div class="dropdown-item">
diff --git a/Bootstrap.Admin/wwwroot/css/site.css b/Bootstrap.Admin/wwwroot/css/site.css
index 4c01fb82..31709609 100644
--- a/Bootstrap.Admin/wwwroot/css/site.css
+++ b/Bootstrap.Admin/wwwroot/css/site.css
@@ -161,6 +161,10 @@ a, a:hover, a:focus {
     padding: 6px;
 }
 
+    .userinfo .dropdown-toggle:after {
+        vertical-align: middle;
+    }
+
 .userinfo .dropdown-item {
     display: flex;
     flex-wrap: wrap;
@@ -193,6 +197,11 @@ a, a:hover, a:focus {
             background-image: linear-gradient(to bottom, #a9d96c 0%, #799e51 100%);
         }
 
+.userinfo .username {
+    max-width: 90px;
+    vertical-align: middle;
+}
+
 .userinfo .badge {
     left: 234px;
     right: auto;