diff --git a/packages/semi-ui/typography/_story/typography.stories.jsx b/packages/semi-ui/typography/_story/typography.stories.jsx
index 502584efa5..48405e56ba 100644
--- a/packages/semi-ui/typography/_story/typography.stories.jsx
+++ b/packages/semi-ui/typography/_story/typography.stories.jsx
@@ -918,4 +918,57 @@ export const SizeAffectIcon = () => {
} underline>带下划线的网页链接
>
)
+}
+
+export const StrongEllipsis = () =>{
+ return (
+ // 用于测试 strong 类型的 ellipsis 效果是否符合预期
+ // https://github.com/DouyinFE/semi-design/pull/2506
+
+ windows
+ {/* case 1 */}
+
+ 这是一个多行截断的例子:Semi Design 是由抖音前端团队与 UED
+ 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+ Web 应用。
+
+
+ {/* case 2 */}
+
+ 这是一个多行截断的例子:Semi Design 是由抖音前端团队与 UED
+ 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+ Web 应用。
+
+ macOS
+ {/* case 3 */}
+
+ 这是一个多行截断的例子:Semi Design 是由抖音前端团队与 UED
+ 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+ Web 应用。
+
+
+ {/* case 4 */}
+
+ 这是一个多行截断的例子:Semi Design 是由抖音前端团队与 UED
+ 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件,帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+ Web 应用。
+
+
+ );
}
\ No newline at end of file
diff --git a/packages/semi-ui/typography/base.tsx b/packages/semi-ui/typography/base.tsx
index f33880a663..d6a1d36dfb 100644
--- a/packages/semi-ui/typography/base.tsx
+++ b/packages/semi-ui/typography/base.tsx
@@ -351,7 +351,7 @@ export default class Base extends Component {
const { rows, suffix, pos } = this.getEllipsisOpt();
- const { children } = this.props;
+ const { children, strong } = this.props;
// wait until element mounted
if (!this.wrapperRef || !this.wrapperRef.current) {
await this.onResize();
@@ -406,7 +406,8 @@ export default class Base extends Component(resolve=>{
this.setState({
diff --git a/packages/semi-ui/typography/util.tsx b/packages/semi-ui/typography/util.tsx
index d1ec118594..6df50c5003 100644
--- a/packages/semi-ui/typography/util.tsx
+++ b/packages/semi-ui/typography/util.tsx
@@ -38,7 +38,8 @@ const getRenderText = (
},
ellipsisStr: string,
suffix: string,
- ellipsisPos: string
+ ellipsisPos: string,
+ isStrong: boolean,
) => {
if (content.length === 0) {
return '';
@@ -66,6 +67,7 @@ const getRenderText = (
ellipsisContainer.style.height = 'auto';
ellipsisContainer.style.top = '-999999px';
ellipsisContainer.style.zIndex = '-1000';
+ isStrong && (ellipsisContainer.style.fontWeight = '600');
// clean up css overflow
ellipsisContainer.style.textOverflow = 'clip';