Skip to content

Commit 5434c17

Browse files
committed
doc(Ellipsis): add some FAQ
1 parent 52eea66 commit 5434c17

File tree

2 files changed

+14
-0
lines changed

2 files changed

+14
-0
lines changed

src/components/ellipsis/index.en.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,10 @@ When the display space is not enough, hide some content and replace it with "...
2525
| onContentClick | Trigger when clicked text content | `(e: React.MouseEvent) => void` | - |
2626
| rows | The number to display lines | `number` | `1` |
2727
| stopPropagationForActionButtons | Prevent the event bubbling caused by the expand operation and the collapse operation | `PropagationEvent[]` | `[]` |
28+
29+
## FAQ
30+
31+
### When the text content contains long and continuous numbers or English words, what should I do if there is no ellipsis?
32+
33+
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).
34+
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

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

0 commit comments

Comments
 (0)