@douyinfe/semi-foundation 2.34.0-alpha.1 → 2.34.0

package/lib/cjs/steps/steps.css

@@ -4,9 +4,6 @@
 .semi-steps .semi-col {
   flex: 1;
 }
-.semi-steps .semi-row-flex {
-  column-gap: 16px;
-}
 .semi-steps-vertical .semi-row-flex {
   flex-direction: column;
 }
@@ -16,13 +13,13 @@
   height: 72px;
   position: relative;
   overflow: hidden;
+  margin-right: 16px;
   border: 1px solid transparent;
   border-radius: var(--semi-border-radius-medium);
   padding: 12px 16px;
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-small));
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-  column-gap: 16px;
 }
 .semi-steps .semi-steps-item .semi-steps-item-title {
   position: relative;
@@ -67,11 +64,11 @@
 .semi-steps .semi-steps-item-finish .semi-steps-item-title {
   color: var(--semi-color-success);
 }
-.semi-steps .semi-steps-item-finish:hover {
+.semi-steps .semi-steps-item-finish-hover:hover {
   background-color: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-finish:hover .semi-icon,
-.semi-steps .semi-steps-item-finish:hover .semi-steps-item-title {
+.semi-steps .semi-steps-item-finish-hover:hover .semi-icon,
+.semi-steps .semi-steps-item-finish-hover:hover .semi-steps-item-title {
   color: var(--semi-color-success-hover);
 }
 .semi-steps .semi-steps-item-finish:active {
@@ -85,11 +82,11 @@
 .semi-steps .semi-steps-item-error .semi-steps-item-title {
   color: var(--semi-color-danger);
 }
-.semi-steps .semi-steps-item-error:hover {
+.semi-steps .semi-steps-item-error-hover:hover {
   background: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-error:hover .semi-icon,
-.semi-steps .semi-steps-item-error:hover .semi-steps-item-title {
+.semi-steps .semi-steps-item-error-hover:hover .semi-icon,
+.semi-steps .semi-steps-item-error-hover:hover .semi-steps-item-title {
   color: var(--semi-color-danger-hover);
 }
 .semi-steps .semi-steps-item-error:active {
@@ -103,11 +100,11 @@
 .semi-steps .semi-steps-item-warning .semi-icon {
   color: var(--semi-color-warning);
 }
-.semi-steps .semi-steps-item-warning:hover {
+.semi-steps .semi-steps-item-warning-hover:hover {
   background: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-warning:hover .semi-steps-item-title,
-.semi-steps .semi-steps-item-warning:hover .semi-icon {
+.semi-steps .semi-steps-item-warning-hover:hover .semi-steps-item-title,
+.semi-steps .semi-steps-item-warning-hover:hover .semi-icon {
   color: var(--semi-color-warning-hover);
 }
 .semi-steps .semi-steps-item-warning:active {
@@ -142,142 +139,7 @@
   background: var(--semi-color-primary-light-default);
 }
 .semi-steps .semi-steps-item-content {
-  flex: 1;
-  overflow: hidden;
-}
-
-.semi-steps-item-fill.semi-steps-item {
-  box-sizing: border-box;
-  display: flex;
-  height: 72px;
-  position: relative;
-  overflow: hidden;
-  border: 1px solid transparent;
-  border-radius: var(--semi-border-radius-medium);
-  padding: 12px 16px;
-  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-  transform: scale(var(--semi-transform_scale-small));
-  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-  column-gap: 16px;
-}
-.semi-steps-item-fill.semi-steps-item .semi-steps-item-title {
-  position: relative;
-  font-size: 18px;
-  line-height: 24px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 600;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--semi-color-text-0);
-  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-}
-.semi-steps-item-fill.semi-steps-item .semi-steps-item-description {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: var(--semi-color-text-2);
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.semi-steps-item-fill.semi-steps-item-process {
-  background-color: var(--semi-color-primary-light-default);
-}
-.semi-steps-item-fill.semi-steps-item-process .semi-steps-item-left:not(.semi-steps-item-icon) {
-  background: var(--semi-color-primary);
-}
-.semi-steps-item-fill.semi-steps-item-process .semi-steps-item-title,
-.semi-steps-item-fill.semi-steps-item-process .semi-steps-item-icon {
-  color: var(--semi-color-primary);
-}
-.semi-steps-item-fill.semi-steps-item-wait .semi-steps-item-left:not(.semi-steps-item-icon) {
-  background: var(--semi-color-text-2);
-}
-.semi-steps-item-fill.semi-steps-item-wait .semi-steps-item-icon {
-  color: var(--semi-color-text-2);
-}
-.semi-steps-item-fill.semi-steps-item-finish .semi-icon,
-.semi-steps-item-fill.semi-steps-item-finish .semi-steps-item-title {
-  color: var(--semi-color-success);
-}
-.semi-steps-item-fill.semi-steps-item-finish:hover {
-  background-color: var(--semi-color-fill-0);
-}
-.semi-steps-item-fill.semi-steps-item-finish:hover .semi-icon,
-.semi-steps-item-fill.semi-steps-item-finish:hover .semi-steps-item-title {
-  color: var(--semi-color-success-hover);
-}
-.semi-steps-item-fill.semi-steps-item-finish:active {
-  background-color: var(--semi-color-fill-1);
-}
-.semi-steps-item-fill.semi-steps-item-finish:active .semi-icon,
-.semi-steps-item-fill.semi-steps-item-finish:active .semi-steps-item-title {
-  color: var(--semi-color-success-active);
-}
-.semi-steps-item-fill.semi-steps-item-error .semi-icon,
-.semi-steps-item-fill.semi-steps-item-error .semi-steps-item-title {
-  color: var(--semi-color-danger);
-}
-.semi-steps-item-fill.semi-steps-item-error:hover {
-  background: var(--semi-color-fill-0);
-}
-.semi-steps-item-fill.semi-steps-item-error:hover .semi-icon,
-.semi-steps-item-fill.semi-steps-item-error:hover .semi-steps-item-title {
-  color: var(--semi-color-danger-hover);
-}
-.semi-steps-item-fill.semi-steps-item-error:active {
-  background-color: var(--semi-color-fill-1);
-}
-.semi-steps-item-fill.semi-steps-item-error:active .semi-icon,
-.semi-steps-item-fill.semi-steps-item-error:active .semi-steps-item-title {
-  color: var(--semi-color-danger-active);
-}
-.semi-steps-item-fill.semi-steps-item-warning .semi-steps-item-title,
-.semi-steps-item-fill.semi-steps-item-warning .semi-icon {
-  color: var(--semi-color-warning);
-}
-.semi-steps-item-fill.semi-steps-item-warning:hover {
-  background: var(--semi-color-fill-0);
-}
-.semi-steps-item-fill.semi-steps-item-warning:hover .semi-steps-item-title,
-.semi-steps-item-fill.semi-steps-item-warning:hover .semi-icon {
-  color: var(--semi-color-warning-hover);
-}
-.semi-steps-item-fill.semi-steps-item-warning:active {
-  background-color: var(--semi-color-fill-1);
-}
-.semi-steps-item-fill.semi-steps-item-warning:active .semi-steps-item-title,
-.semi-steps-item-fill.semi-steps-item-warning:active .semi-icon {
-  color: var(--semi-color-warning-active);
-}
-.semi-steps-item-fill.semi-steps-item-clickable {
-  cursor: pointer;
-}
-.semi-steps-item-fill .semi-steps-item-left {
-  width: 24px;
-  height: 24px;
-  line-height: 32px;
-  text-align: center;
-  border-radius: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  line-height: 28px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 600;
-  flex-grow: 0;
-}
-.semi-steps-item-fill .semi-steps-item-left.semi-steps-item-plain {
-  color: rgba(var(--semi-white), 1);
-}
-.semi-steps-item-fill .semi-steps-item-left-process {
-  background: var(--semi-color-primary-light-default);
-}
-.semi-steps-item-fill .semi-steps-item-content {
+  margin-left: 16px;
   flex: 1;
   overflow: hidden;
 }
@@ -285,7 +147,6 @@
 .semi-steps-basic.semi-steps-horizontal {
   display: flex;
   flex-flow: row nowrap;
-  column-gap: 16px;
 }
 .semi-steps-basic.semi-steps-horizontal.semi-steps-hasline .semi-steps-item-title::after {
   content: "";
@@ -297,6 +158,12 @@
   height: 1px;
   background: var(--semi-color-fill-2);
 }
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item {
+  padding-left: 16px;
+}
+.semi-steps-basic.semi-steps-horizontal .semi-steps-item:first-child {
+  padding-left: 0;
+}
 .semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child {
   flex: none;
 }
@@ -336,7 +203,9 @@
 .semi-steps-basic.semi-steps-vertical {
   display: flex;
   flex-flow: column nowrap;
-  row-gap: 9px;
+}
+.semi-steps-basic.semi-steps-vertical.semi-steps-small .semi-steps-item .semi-steps-item-content {
+  min-height: 40px;
 }
 .semi-steps-basic.semi-steps-vertical.semi-steps-hasline .semi-steps-item-icon::after {
   content: "";
@@ -348,8 +217,11 @@
   height: 9999px;
   background: var(--semi-color-fill-2);
 }
-.semi-steps-basic.semi-steps-vertical.semi-steps-small .semi-steps-item .semi-steps-item-content {
-  min-height: 40px;
+.semi-steps-basic.semi-steps-vertical .semi-steps-item {
+  padding-top: 9px;
+}
+.semi-steps-basic.semi-steps-vertical .semi-steps-item:first-child {
+  padding-top: 0;
 }
 .semi-steps-basic.semi-steps-vertical .semi-steps-item:last-child .semi-steps-item-icon::after {
   display: none;
@@ -392,10 +264,10 @@
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-small));
 }
-.semi-steps-basic .semi-steps-item:hover .semi-steps-item-title {
+.semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-title {
   color: var(--semi-color-focus-border);
 }
-.semi-steps-basic .semi-steps-item:hover .semi-steps-item-description {
+.semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-description {
   color: var(--semi-color-focus-border);
 }
 .semi-steps-basic .semi-steps-item .semi-steps-item-container {
@@ -458,7 +330,7 @@
   background: var(--semi-color-fill-0);
   color: var(--semi-color-text-2);
 }
-.semi-steps-basic .semi-steps-item-wait:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+.semi-steps-basic .semi-steps-item-wait-hover:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
   background: var(--semi-color-secondary-light-default);
   color: var(--semi-color-focus-border);
 }
@@ -496,197 +368,6 @@
   height: 20px;
 }
 
-.semi-steps-item-basic.semi-steps-item-horizontal {
-  display: flex;
-  flex-flow: row nowrap;
-  column-gap: 16px;
-}
-.semi-steps-item-basic.semi-steps-item-horizontal.semi-steps-item:last-child {
-  flex: none;
-}
-.semi-steps-item-basic.semi-steps-item-horizontal.semi-steps-item:last-child .semi-steps-item-title {
-  max-width: 100%;
-  padding-right: 0;
-}
-.semi-steps-item-basic.semi-steps-item-horizontal.semi-steps-item:last-child .semi-steps-item-title::after {
-  display: none;
-}
-.semi-steps-item-basic.semi-steps-item-horizontal.semi-steps-item-done .semi-steps-item-container .semi-steps-item-title::after {
-  background: var(--semi-color-primary);
-}
-.semi-steps-item-basic.semi-steps-item-horizontal.semi-steps-item .semi-steps-item-content {
-  flex: 1;
-}
-.semi-steps-item-basic.semi-steps-item-horizontal.semi-steps-item .semi-steps-item-description {
-  font-size: 12px;
-  line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: var(--semi-color-text-2);
-  width: 100%;
-  max-width: 268px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.semi-steps-item-basic.semi-steps-item-horizontal.semi-steps-item .semi-steps-item-title {
-  max-width: 80%;
-}
-.semi-steps-item-basic.semi-steps-item-horizontal.semi-steps-item .semi-steps-item-title .semi-steps-item-title-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-}
-.semi-steps-item-basic.semi-steps-item-vertical {
-  display: flex;
-  flex-flow: column nowrap;
-  row-gap: 9px;
-}
-.semi-steps-item-basic.semi-steps-item-vertical.semi-steps-item:last-child .semi-steps-item-icon::after {
-  display: none;
-}
-.semi-steps-item-basic.semi-steps-item-vertical.semi-steps-item-done .semi-steps-item-icon::after {
-  background: var(--semi-color-primary);
-}
-.semi-steps-item-basic.semi-steps-item-vertical.semi-steps-item .semi-steps-item-content {
-  min-height: 42px;
-  padding-bottom: 22px;
-}
-.semi-steps-item-basic.semi-steps-item-vertical.semi-steps-item .semi-steps-item-icon {
-  display: inline-flex;
-  position: relative;
-  padding-bottom: 9px;
-}
-.semi-steps-item-basic.semi-steps-item-vertical.semi-steps-item .semi-steps-item-description {
-  font-size: 12px;
-  line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: var(--semi-color-text-2);
-  width: 100%;
-}
-.semi-steps-item-basic.semi-steps-item-vertical.semi-steps-item .semi-steps-item-title {
-  max-width: 100%;
-}
-.semi-steps-item-basic.semi-steps-item-vertical.semi-steps-item .semi-steps-item-title .semi-steps-item-title-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.semi-steps-item-basic.semi-steps-item {
-  box-sizing: border-box;
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
-  overflow: hidden;
-  flex: 1;
-  cursor: pointer;
-  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-  transform: scale(var(--semi-transform_scale-small));
-}
-.semi-steps-item-basic.semi-steps-item:hover .semi-steps-item-title {
-  color: var(--semi-color-focus-border);
-}
-.semi-steps-item-basic.semi-steps-item:hover .semi-steps-item-description {
-  color: var(--semi-color-focus-border);
-}
-.semi-steps-item-basic.semi-steps-item .semi-steps-item-container {
-  display: flex;
-  align-items: flex-start;
-}
-.semi-steps-item-basic.semi-steps-item .semi-steps-item-left {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 8px;
-}
-.semi-steps-item-basic.semi-steps-item .semi-steps-item-left .semi-steps-item-icon {
-  display: flex;
-  height: 24px;
-  align-items: center;
-}
-.semi-steps-item-basic.semi-steps-item .semi-steps-item-left .semi-steps-item-number-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  font-size: 16px;
-  line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 600;
-  background: var(--semi-color-primary);
-  border-radius: var(--semi-border-radius-circle);
-  color: var(--semi-color-white);
-  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-}
-.semi-steps-item-basic.semi-steps-item .semi-steps-item-title {
-  position: relative;
-  display: inline-block;
-  font-size: 16px;
-  line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 24px;
-  font-weight: 600;
-  color: var(--semi-color-text-0);
-  vertical-align: top;
-  padding-right: 16px;
-  padding-bottom: 4px;
-  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
-}
-.semi-steps-item-basic.semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon {
-  color: var(--semi-color-primary);
-}
-.semi-steps-item-basic.semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
-  color: var(--semi-color-white);
-}
-.semi-steps-item-basic.semi-steps-item-wait .semi-steps-item-title {
-  color: var(--semi-color-text-2);
-}
-.semi-steps-item-basic.semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon {
-  color: var(--semi-color-text-2);
-}
-.semi-steps-item-basic.semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
-  background: var(--semi-color-fill-0);
-  color: var(--semi-color-text-2);
-}
-.semi-steps-item-basic.semi-steps-item-wait:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
-  background: var(--semi-color-secondary-light-default);
-  color: var(--semi-color-focus-border);
-}
-.semi-steps-item-basic.semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon {
-  color: var(--semi-color-primary);
-}
-.semi-steps-item-basic.semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
-  color: var(--semi-color-white);
-}
-.semi-steps-item-basic.semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon {
-  color: var(--semi-color-danger);
-}
-.semi-steps-item-basic.semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
-  color: var(--semi-color-primary);
-}
-.semi-steps-item-basic.semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon {
-  color: var(--semi-color-warning);
-}
-.semi-steps-item-basic.semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
-  color: var(--semi-color-white);
-}
-.semi-steps-item-basic.semi-steps-item-small.semi-steps-item .semi-steps-item-title {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-.semi-steps-item-basic.semi-steps-item-small.semi-steps-item .semi-steps-item-left .semi-steps-item-icon {
-  height: 20px;
-}
-.semi-steps-item-basic.semi-steps-item-small.semi-steps-item .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
-  font-size: 12px;
-  line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  width: 20px;
-  height: 20px;
-}
-
 .semi-steps-nav {
   display: inline-flex;
   flex-flow: row nowrap;
@@ -736,51 +417,6 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-.semi-steps-item-nav.semi-steps-item {
-  box-sizing: border-box;
-}
-.semi-steps-item-nav.semi-steps-item:last-child {
-  flex: none;
-}
-.semi-steps-item-nav.semi-steps-item:last-child .semi-steps-item-content {
-  width: auto;
-}
-.semi-steps-item-nav.semi-steps-item .semi-steps-item-container {
-  display: flex;
-  align-items: center;
-  color: var(--semi-color-text-2);
-}
-.semi-steps-item-nav.semi-steps-item .semi-steps-item-container .semi-steps-item-icon {
-  display: inline-flex;
-  flex: 1;
-  justify-content: center;
-  color: var(--semi-grey-3);
-  min-width: 60px;
-}
-.semi-steps-item-nav.semi-steps-item .semi-steps-item-content {
-  flex: 1;
-  display: inline-block;
-}
-.semi-steps-item-nav.semi-steps-item .semi-steps-item-title {
-  font-size: 16px;
-  line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  max-width: 17em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 400;
-}
-.semi-steps-item-nav.semi-steps-item-active .semi-steps-item-title {
-  color: var(--semi-color-text-0);
-  font-weight: 600;
-}
-.semi-steps-item-nav.semi-steps-item-small .semi-steps-item-title {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
 .semi-rtl .semi-steps,
 .semi-portal-rtl .semi-steps {
   direction: rtl;

package/lib/cjs/table/foundation.d.ts

@@ -32,6 +32,7 @@ export interface BaseColumnProps<RecordType> {
     title?: any;
     useFullRender?: boolean;
     width?: string | number;
+    ellipsis?: BaseEllipsis;
 }
 export interface TableAdapter<RecordType> extends DefaultAdapter {
     resetScrollY: () => void;
@@ -81,6 +82,7 @@ export interface TableAdapter<RecordType> extends DefaultAdapter {
     getHandleColumns: () => (queries: BaseColumnProps<RecordType>[], cachedColumns: BaseColumnProps<RecordType>[]) => BaseColumnProps<RecordType>[];
     getMergePagination: () => (pagination: BasePagination) => BasePagination;
     setBodyHasScrollbar: (bodyHasScrollBar: boolean) => void;
+    getTableLayout: () => 'fixed' | 'auto';
 }
 declare class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType>> {
     memoizedWithFnsColumns: (queries: BaseColumnProps<RecordType>[], cachedColumns: BaseColumnProps<RecordType>[], rowSelectionUpdate: boolean, hideExpandedColumn: boolean, bodyHasScrollBar: boolean) => BaseColumnProps<RecordType>[];
@@ -366,4 +368,7 @@ export interface BaseChangeInfoSorter<RecordType> {
 export declare type BaseIncludeGroupRecord<RecordType> = RecordType | {
     groupKey: string;
 };
+export declare type BaseEllipsis = boolean | {
+    showTitle: boolean;
+};
 export default TableFoundation;

package/lib/cjs/table/table.css

@@ -94,6 +94,10 @@
 .semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
   background-color: var(--semi-color-bg-1);
 }
+.semi-table-operate-wrapper {
+  display: flex;
+  justify-content: flex-start;
+}
 .semi-table-body {
   overflow: auto;
   width: 100%;
@@ -119,8 +123,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   vertical-align: middle;
-  word-break: break-all;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   position: relative;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
@@ -173,6 +176,16 @@
   display: inline-flex;
   align-items: center;
 }
+.semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis .semi-table-row-head-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .semi-table-thead > .semi-table-row .react-resizable {
   position: relative;
   background-clip: padding-box;
@@ -223,8 +236,7 @@
 }
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   display: table-cell;
-  word-wrap: break-word;
-  word-break: break-all;
+  overflow-wrap: break-word;
   border-left: none;
   border-right: none;
   border-bottom: 1px solid var(--semi-color-border);
@@ -236,6 +248,11 @@
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
   border-right: 2px solid var(--semi-color-primary);
 }
+.semi-table-tbody > .semi-table-row > .semi-table-row-cell-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .semi-table-tbody > .semi-table-row.semi-table-row-expand > .semi-table-row-cell {
   background-color: var(--semi-color-fill-0);
 }
@@ -336,9 +353,10 @@
   text-align: center;
 }
 .semi-table .semi-table-column-sorter-wrapper {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   cursor: pointer;
+  overflow: hidden;
 }
 .semi-table .semi-table-column-sorter-up, .semi-table .semi-table-column-sorter-down {
   height: 0;

package/lib/cjs/table/table.scss

@@ -83,6 +83,11 @@ $module: #{$prefix}-table;
         }
     }
 
+    &-operate-wrapper {
+        display: flex;
+        justify-content: flex-start;
+    }
+
     &-body {
         overflow: auto;
         width: 100%;
@@ -115,8 +120,9 @@ $module: #{$prefix}-table;
                 padding-top: $spacing-table_row_head-paddingY;
                 padding-bottom: $spacing-table_row_head-paddingY;
                 vertical-align: middle;
-                word-break: break-all;
-                word-wrap: break-word;
+                overflow-wrap: break-word;
+                // word-break: break-all;
+                // word-wrap: break-word;
                 position: relative;
 
                 &.#{$module}-cell-fixed {
@@ -177,6 +183,14 @@ $module: #{$prefix}-table;
                     display: inline-flex;
                     align-items: center;
                 }
+
+                &-ellipsis {
+                    @include text-overflow-hidden;
+
+                    .#{$module}-row-head-title {
+                        @include text-overflow-hidden;
+                    }
+                }
             }
 
             .react-resizable {
@@ -241,8 +255,9 @@ $module: #{$prefix}-table;
 
             & > .#{$module}-row-cell {
                 display: table-cell;
-                word-wrap: break-word;
-                word-break: break-all;
+                overflow-wrap: break-word;
+                // word-wrap: break-word;
+                // word-break: break-all;
                 border-left: none;
                 border-right: none;
                 border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -254,6 +269,10 @@ $module: #{$prefix}-table;
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;
                 }
+
+                &-ellipsis {
+                    @include text-overflow-hidden;
+                }
             }
             &.#{$module}-row {
                 &-expand {
@@ -401,9 +420,10 @@ $module: #{$prefix}-table;
             text-align: center;
 
             &-wrapper {
-                display: inline-flex;
+                display: flex;
                 align-items: center;
                 cursor: pointer;
+                overflow: hidden;
             }
 
             &-up,