浏览代码

docs: add attension for Highlight

zhangyumei.0319 3 周之前
父节点
当前提交
a958b2fb0e
共有 2 个文件被更改,包括 8 次插入0 次删除
  1. 3 0
      content/show/highlight/index-en-US.md
  2. 5 0
      content/show/highlight/index.md

+ 3 - 0
content/show/highlight/index-en-US.md

@@ -24,6 +24,9 @@ import { Highlight } from '@douyinfe/semi-ui';
 
 You can specify keywords to be highlighted with `searchWords` and source text with `sourceString`
 
+<Notice title='Attension'>
+The Highlight component will split the text into multiple independent inline elements. Any CSS layout that splits the text flow (such as flex layout) may break the highlighted text. To prevent the highlighted content from being split into different rows or columns by the browser, please wrap the Highlight component with a wrapper element as needed.
+</Notice>
 
 ```jsx live=true dir="column"
 import React from 'react';

+ 5 - 0
content/show/highlight/index.md

@@ -23,6 +23,11 @@ import { Highlight } from '@douyinfe/semi-ui';
 
 你可以通过 `searchWords` 指定需要高亮的关键字,通过 `sourceString` 指定源文本
 
+<Notice title='注意事项'>
+Highlight 组件会将文本被拆分成多个独立的行内元素,任何分割文本流的 CSS 布局(如 flex 布局)可能会将高亮文本断开,为避免高亮内容被浏览器拆分到不同行或列,请按需使用元素包裹 Highlight 组件。
+</Notice>
+
+
 
 ```jsx live=true dir="column"
 import React from 'react';