Progress component can not display well in table

[kennylbj]

Version

2.13.10

Environment

OS: macOS High Sierra
browser: Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Reproduction link

https://codepen.io/kennylbj/pen/KyveQq?editors=0011

Steps to reproduce

Render Progress component in table

What is expected?

Display Progress component in one line.

What is actually happening?

The percentage text of Progress component is broke up into two lines if the percentage value is larger than 9.

[yesmeck]

For now, you can set a custom class name on the Progress and set word-break to normal.

<Progress className="my-progress" percent={progress} status='active' />

.my-progress {
  word-break: normal;  
}

[kennylbj]

@yesmeck Problem solved, thx.
Waiting for official fix anyway.

[yesmeck]

I'm afraid this issue won't be fixed, because table is agnostic of what you render to the cell. Maybe we can add a wordBreak option to the column, I'm not sure.

[kennylbj]

You are right. IMO, however, adding Progress with additional styles in order to work fine with table is kind of odd.

[yesmeck]

Added word-break: normal; as progress's default style.