diff --git a/src/components/Combobox/Common/ComboboxWrapper.tsx b/src/components/Combobox/Common/ComboboxWrapper.tsx
index 01593b37..5f180f6f 100644
--- a/src/components/Combobox/Common/ComboboxWrapper.tsx
+++ b/src/components/Combobox/Common/ComboboxWrapper.tsx
@@ -59,7 +59,7 @@ export const ComboboxWrapper = forwardRef<
         {...getLabelProps({ htmlFor: id })}
         cursor={disabled ? "not-allowed" : "text"}
       >
-        <Box display="flex" flexDirection="column" width="100%">
+        <Box display="flex" flexDirection="column" __width="79%">
           <Box
             as="span"
             className={classNames(spanRecipe({ typed, size, disabled, error }))}
diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.stories.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.stories.tsx
index cfb99954..871627b3 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.stories.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.stories.tsx
@@ -70,6 +70,7 @@ export const Default = () => {
 
   return (
     <DynamicCombobox
+      __width="200px"
       value={value}
       label="Pick star wars character"
       onChange={(value) => setValue(value)}
@@ -149,7 +150,7 @@ export const WithAdorment = () => {
   );
 };
 
-export const Loding = () => {
+export const Loading = () => {
   const [value, setValue] = useState<Option | null>(null);
 
   return (
diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
index 98f69441..14c61f0f 100644
--- a/src/components/Combobox/Static/Combobox.tsx
+++ b/src/components/Combobox/Static/Combobox.tsx
@@ -106,7 +106,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
         getLabelProps={getLabelProps}
         getToggleButtonProps={getToggleButtonProps}
       >
-        <Box display="flex" alignItems="center">
+        <Box display="flex">
           {startAdornment && typed && <Box>{startAdornment(value)}</Box>}
 
           <Box
@@ -115,6 +115,9 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
             type="text"
             className={classNames(inputRecipe({ size, error }))}
             disabled={disabled}
+            alignItems="center"
+            textOverflow="ellipsis"
+            title={isString(value) ? value : value?.label}
             {...props}
             {...getInputProps({
               id,
diff --git a/src/components/Combobox/Static/StaticCombobox.stories.tsx b/src/components/Combobox/Static/StaticCombobox.stories.tsx
index 6bbec6ee..93d8a73b 100644
--- a/src/components/Combobox/Static/StaticCombobox.stories.tsx
+++ b/src/components/Combobox/Static/StaticCombobox.stories.tsx
@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 
-import { Box } from "~/components/Box";
 import { Option } from "~/components/BaseSelect";
+import { Box } from "~/components/Box";
 import { Combobox } from "..";
 
 const options = [
@@ -209,3 +209,26 @@ export const WithAdornment = () => {
     />
   );
 };
+
+export const WithEllipsis = () => {
+  const values = [
+    { value: "color-black", label: "Long black label here" },
+    {
+      value: "color-red",
+      label: "Long red label here",
+    },
+  ];
+  const [value, setValue] = useState<Option | null>(values[0]);
+
+  return (
+    <Box __width="200px">
+      <Combobox
+        options={values}
+        value={value}
+        size="large"
+        label="Label"
+        onChange={(value) => setValue(value)}
+      />
+    </Box>
+  );
+};
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 100933f2..15cde9f4 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 
+import { Box } from "../Box";
 import { Select } from ".";
 
 const options = [
@@ -153,3 +154,26 @@ export const WithStringValue = () => {
     />
   );
 };
+
+export const WithEllipsis = () => {
+  const values = [
+    { value: "color-black", label: "Long black label here" },
+    {
+      value: "color-red",
+      label: "Long red label here",
+    },
+  ];
+  const [value, setValue] = useState("color-black");
+
+  return (
+    <Box __width="200px">
+      <Select
+        options={values}
+        value={value}
+        size="large"
+        label="Label"
+        onChange={(value) => setValue(value)}
+      />
+    </Box>
+  );
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 9378b610..bd489a23 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -112,11 +112,19 @@ const SelectInner = <T extends Option, V extends Option | string>(
         getLabelProps={getLabelProps}
         getToggleButtonProps={getToggleButtonProps}
       >
-        <Box height={getBoxHeight(size)} {...props} ref={ref}>
+        <Box
+          height={getBoxHeight(size)}
+          {...props}
+          ref={ref}
+          whiteSpace="nowrap"
+          overflow="hidden"
+          textOverflow="ellipsis"
+        >
           <Text
             size={size}
             variant="body"
             color={error ? "critical1" : "default1"}
+            title={selectedItem?.label}
           >
             {selectedItem?.label}
           </Text>
diff --git a/src/components/Select/SelectWrapper.tsx b/src/components/Select/SelectWrapper.tsx
index b6552fb9..0f3a63b8 100644
--- a/src/components/Select/SelectWrapper.tsx
+++ b/src/components/Select/SelectWrapper.tsx
@@ -56,7 +56,7 @@ export const SelectWrapper = forwardRef<HTMLLabelElement, SelectWrapperProps>(
           data-macaw-ui-component="Select"
           cursor={disabled ? "not-allowed" : "pointer"}
         >
-          <Box display="flex" flexDirection="column" width="100%">
+          <Box display="flex" flexDirection="column" __width="79%">
             <Box
               as="span"
               className={classNames(