Element: [Bug Report] Text wrap cuts words in half in popover

[macu]

Element UI version

2.0.8

OS/Browsers version

macOS High Sierra / Chrome 62

Vue version

2.5.9

Reproduction Link

https://jsfiddle.net/mmx38qxw/110/

Steps to reproduce

When the popover opens text content is wrapped mid-word.

What is Expected?

Line breaks should not occur mid-word.

What is actually happening?

Breaking mid-word.

[Leopoldthecoder]

Fixed in https://github.com/ElemeFE/element/pull/8859/commits/adc315ff1d7540d0368b2075678de2a91f913c75

[duyhung85]

This behavior also happens in table cell because of css class .el-table .cell has property word-break: break-all; so please apply the same fix for it

[franj0]

I have installed 2.14.1 and this issue still exist.
File popover.scss from this commit is not fixed.It still have word-break:break-all line

[macu]

@franj0 I take it since Element is from China there are different rule conventions there about text wrapping. Unsure.

It's a simple fix with your own CSS overrides. I add word-break: normal; in an app-wide stylesheet for every class I need to fix, including .el-dialog__body, .el-checkbox__label, etc.

[franj0]

Popover component accept popper-class as attribute but does not apply any css rule from that class.
I tried override it in many ways, but nothing help me.
As you can see on 2nd image, my custom class does not exist in dev tools list of css clases, so weird :S

anyway tnx for try

[macu]

@franj0 adding this rule to my custom stylesheet (included in the page after the Element stylesheet) works for me:

.el-popover, .el-popover__title {
    word-break: normal;
}

[franj0]

@macu Finally, thank you very much. It does not accept it from custom component, but from root App level style accept it