浏览代码

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

YyumeiZhang 3 月之前
父节点
当前提交
01c85b3f44
共有 2 个文件被更改,包括 11 次插入0 次删除
  1. 4 0
      packages/semi-foundation/input/input.scss
  2. 7 0
      packages/semi-ui/input/_story/input.stories.jsx

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

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

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

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