fix(Ellipsis): fix error when using with display flex and add doc about word-break (ant-design#5568)

Author: awmleer

src/components/ellipsis/ellipsis.tsx

@@ -45,6 +45,7 @@ export const Ellipsis: FC<EllipsisProps> = p => {
   function calcEllipsised() {
     const root = rootRef.current
     if (!root) return
+    if (!root.offsetParent) return
     const originStyle = window.getComputedStyle(root)
     const container = document.createElement('div')
     const styleNames: string[] = Array.prototype.slice.apply(originStyle)
@@ -62,6 +63,7 @@ export const Ellipsis: FC<EllipsisProps> = p => {
     container.style.whiteSpace = 'normal'
     container.style.webkitLineClamp = 'unset'
     container.style.display = 'block'
+
     const lineHeight = pxToNumber(originStyle.lineHeight)
     const maxHeight = Math.floor(
       lineHeight * (props.rows + 0.5) +

src/components/ellipsis/index.en.md

@@ -25,3 +25,10 @@ When the display space is not enough, hide some content and replace it with "...
 | onContentClick                  | Trigger when clicked text content                                                    | `(e: React.MouseEvent) => void` | -       |
 | rows                            | The number to display lines                                                          | `number`                        | `1`     |
 | stopPropagationForActionButtons | Prevent the event bubbling caused by the expand operation and the collapse operation | `PropagationEvent[]`            | `[]`    |
+
+## FAQ
+
+### When the text content contains long and continuous numbers or English words, what should I do if there is no ellipsis?
+
+The value of the `word-break` CSS property is read inside the `Ellipsis` component. If the value of this style property is not set, the default value is: `normal`. So, when the text content contains a lot of numbers or English words, the text content cannot be omitted (default behavior of browsers).
+At this point, if you need to make the text ellipsis take effect, you can manually add the `word-break` style (for example, `word-break: break-word`) to the `Ellipsis` component or its outer elements, and the `Ellipsis` component will fully follow the style inheritance behavior, get the `word-break` you set, so as to achieve automatic ellipsis.

src/components/ellipsis/index.zh.md

@@ -25,3 +25,10 @@
 | onContentClick                  | 点击文本内容时触发                   | `(e: React.MouseEvent) => void` | -       |
 | rows                            | 展示几行                             | `number`                        | `1`     |
 | stopPropagationForActionButtons | 阻止展开操作，收起操作引发的事件冒泡 | `PropagationEvent[]`            | `[]`    |
+
+## FAQ
+
+### 文本内容包含较长且连续的数字或英文时，不会出现省略怎么办？
+
+`Ellipsis` 组件内部会读取 `word-break` 这个 CSS 属性的值，如果未设置该样式属性的值，默认值为：`normal`。所以，当文本内容中包含大量数字或英文时，文本内容无法省略（浏览器的默认行为）。
+此时，如果需要让文本省略生效，可以手动在 `Ellipsis` 组件或其外层元素中，添加 `word-break` 样式（比如，`word-break: break-word`），`Ellipsis` 组件会完全遵循样式继承行为，拿到你设置的 `word-break`，从而实现自动省略。

src/components/ellipsis/tests/ellipsis.test.tsx

@@ -30,6 +30,10 @@ describe('Ellipsis', () => {
         return lineHeight * 4
       },
     })
+
+    Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+      value: {},
+    })
   })
 
   afterAll(() => {