Browse Source

style: When the length of the placeholder of the Input exceeds the length, the content exceeding the length will be omitted (#2872)

YyumeiZhang 3 months ago
parent
commit
01c85b3f44

+ 4 - 0
packages/semi-foundation/input/input.scss

@@ -457,6 +457,10 @@ $module: #{$prefix}-input;
     background-color: transparent;
     background-color: transparent;
     box-sizing: border-box;
     box-sizing: border-box;
 
 
+    &:placeholder-shown {
+        text-overflow: ellipsis;
+    }
+
     &[type="password"]::-ms-reveal,
     &[type="password"]::-ms-reveal,
     &[type="password"]::-ms-clear {
     &[type="password"]::-ms-clear {
         display: none;
         display: none;

+ 7 - 0
packages/semi-ui/input/_story/input.stories.jsx

@@ -1067,3 +1067,10 @@ export const FixTextAreaAutoFocus = () => {
     </div>
     </div>
   )
   )
 };
 };
+
+export const LongPlaceholder = () => {
+  return (<Input 
+    placeholder="Long placeholder test Long placeholder test Long placeholder test"
+    style={{width: 200}}
+  />)
+};