Browse Source

docs: add attension for Highlight

zhangyumei.0319 3 weeks ago
parent
commit
a958b2fb0e
2 changed files with 8 additions and 0 deletions
  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';