diff --git a/components/auto-complete/auto-complete-item.tsx b/components/auto-complete/auto-complete-item.tsx
index 9744d1f..63b102b 100644
--- a/components/auto-complete/auto-complete-item.tsx
+++ b/components/auto-complete/auto-complete-item.tsx
@@ -2,7 +2,8 @@ import React, { useMemo } from 'react'
 import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
 import { useAutoCompleteContext } from './auto-complete-context'
-import { NormalSizes } from 'components/utils/prop-types'
+import { NormalSizes } from '../utils/prop-types'
+import Ellipsis from '../shared/ellipsis'
 
 interface Props {
   value: string
@@ -37,7 +38,7 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
 
   return (
     <div className={`item ${isActive ? 'active' : ''}`} onClick={selectHandler}>
-      <span>{children}</span>
+      <Ellipsis>{children}</Ellipsis>
       <style jsx>{`
         .item {
           display: flex;
@@ -56,13 +57,6 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
           transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
         }
 
-        span {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          min-width: 0;
-        }
-
         .item:first-of-type {
           border-top-left-radius: ${theme.layout.radius};
           border-top-right-radius: ${theme.layout.radius};
diff --git a/components/select/select-option.tsx b/components/select/select-option.tsx
index 9aad57f..67d0824 100644
--- a/components/select/select-option.tsx
+++ b/components/select/select-option.tsx
@@ -3,6 +3,7 @@ import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
 import { useSelectContext } from './select-context'
 import useWarning from '../utils/use-warning'
+import Ellipsis from '../shared/ellipsis'
 
 interface Props {
   value?: string
@@ -80,7 +81,7 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
         className={`option ${divider ? 'divider' : ''} ${label ? 'label' : ''} ${className}`}
         onClick={clickHandler}
         {...props}>
-        <span>{children}</span>
+        <Ellipsis>{children}</Ellipsis>
       </div>
 
       <style jsx>{`
@@ -101,13 +102,6 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
           transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
         }
 
-        span {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          min-width: 0;
-        }
-
         .option:hover {
           background-color: ${hoverBgColor};
           color: ${theme.palette.accents_7};
diff --git a/components/select/select.tsx b/components/select/select.tsx
index de10b8b..8f27829 100644
--- a/components/select/select.tsx
+++ b/components/select/select.tsx
@@ -11,6 +11,7 @@ import SelectMultipleValue from './select-multiple-value'
 import Grid from '../grid'
 import { SelectContext, SelectConfig } from './select-context'
 import { getSizes } from './styles'
+import Ellipsis from '../shared/ellipsis'
 
 interface Props {
   disabled?: boolean
@@ -136,7 +137,11 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
         ref={ref}
         onClick={clickHandler}
         {...props}>
-        {isEmpty && <span className="value placeholder">{placeholder}</span>}
+        {isEmpty && (
+          <span className="value placeholder">
+            <Ellipsis>{placeholder}</Ellipsis>
+          </span>
+        )}
         {value && !multiple && <span className="value">{selectedChild}</span>}
         {value && multiple && <Grid.Container gap={0.5}>{selectedChild}</Grid.Container>}
         <SelectDropdown