style: [Tag] children is string type child can be omitted, otherwise … (#1475)

* style: [Tag] children is string type child can be omitted, otherwise align

* style: [Tag] content style fix

packages/semi-foundation/tag/tag.scss

@@ -53,9 +53,19 @@ $types: "ghost", "solid", "light";
 
     &-content {
         flex: 1;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+
+        &-ellipsis {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        &-center {
+            display: flex;
+            @include all-center;
+            height: 100%;
+            min-width: 0;
+        }
     }
 
     &-close {

packages/semi-ui/tag/index.tsx

@@ -9,6 +9,7 @@ import { TagProps, TagSize, TagColor, TagType } from './interface';
 import { handlePrevent } from '@douyinfe/semi-foundation/utils/a11y';
 import '@douyinfe/semi-foundation/tag/tag.scss';
 import { isString } from 'lodash';
+import cls from 'classnames';
 
 export * from './interface';
 
@@ -155,10 +156,13 @@ export default class Tag extends Component<TagProps, TagState> {
                 <IconClose size="small" />
             </div>
         ) : null;
+        const stringChild = isString(children);
+        const contentCls = cls(`${prefixCls}-content`, `${prefixCls}-content-${stringChild ? 'ellipsis' : 'center' }`);
+
         return (
-            <div aria-label={this.props['aria-label'] || isString(children) ? `${closable ? 'Closable ' : ''}Tag: ${children}` : '' } {...wrapProps}>
+            <div aria-label={this.props['aria-label'] || stringChild ? `${closable ? 'Closable ' : ''}Tag: ${children}` : '' } {...wrapProps}>
                 {avatarSrc ? this.renderAvatar() : null}
-                <div className={`${prefixCls}-content`}>
+                <div className={contentCls}>
                     {children}
                 </div>
                 {closeIcon}

packages/semi-ui/tagInput/index.tsx

@@ -452,16 +452,13 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                         visible
                         aria-label={`${!disabled ? 'Closable ' : ''}Tag: ${value}`}
                     >
-                        {/* Wrap a layer of div outside IconHandler and Value to ensure that the two are aligned */}
-                        <div className={`${prefixCls}-tag-content-wrapper`}>
-                            {showIconHandler && <DragHandle />}
-                            <Paragraph
-                                className={typoCls}
-                                ellipsis={{ showTooltip: showContentTooltip, rows: 1 }}
-                            >
-                                {value}
-                            </Paragraph>
-                        </div>
+                        {showIconHandler && <DragHandle />}
+                        <Paragraph
+                            className={typoCls}
+                            ellipsis={{ showTooltip: showContentTooltip, rows: 1 }}
+                        >
+                            {value}
+                        </Paragraph>
                     </Tag>
                 );
             }