diff --git a/src/extensions/default/HTMLCodeHints/main.js b/src/extensions/default/HTMLCodeHints/main.js
index 174af532b5..6aa213b8d8 100644
--- a/src/extensions/default/HTMLCodeHints/main.js
+++ b/src/extensions/default/HTMLCodeHints/main.js
@@ -143,15 +143,20 @@ define(function (require, exports, module) {
      * @returns {jQuery} - A jQuery element representing the formatted hint.
      */
     function formatEmmetHint(abbr) {
-        // Create the main container for the hint text.
+        // Create the main container for the hint
         var $hint = $("<span>")
-            .addClass("emmet-hint")
+            .addClass("emmet-hint");
+
+        // Create a wrapper for the text content
+        var $textContent = $("<span>")
+            .addClass("emmet-text-content")
             .text(abbr);
 
         // style in brackets_patterns_override.less file
         let $icon = $(`<span class="emmet-code-hint">Emmet</span>`);
 
-        // Append the icon to the hint element
+        // Append both text content and icon to the main container
+        $hint.append($textContent);
         $hint.append($icon);
 
         return $hint;
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
index 4e5db00b9f..5b99c5e46c 100644
--- a/src/styles/brackets_patterns_override.less
+++ b/src/styles/brackets_patterns_override.less
@@ -727,22 +727,37 @@ a:focus {
   }
 }
 
-.emmet-hint {
-    margin-right: 48px !important;
+.emmet-code-hint {
+    visibility: hidden;
 }
 
-.emmet-code-hint {
+.codehint-menu .dropdown-menu li a.highlight .emmet-code-hint {
+    visibility: visible;
     position: absolute;
-    font-size: 0.85em;
+    right: 1rem;
+    font-size: 0.85em !important;
     font-weight: @font-weight-semibold;
-    right: 4px;
-    bottom: 0px;
+    letter-spacing: 0.3px;
     color: @css-codehint-icon !important;
     .dark& {
         color: @dark-css-codehint-icon !important;
     }
 }
 
+.emmet-hint {
+    margin-right: 48px !important;
+}
+
+.emmet-text-content {
+    display: inline-block;
+    max-width: 320px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+    line-height: inherit;
+}
+
 #codehint-desc {
 	background: @bc-codehint-desc;
 	position: absolute;