ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.1k stars 14.64k forks source link

[bug report] when slider at the max place. Text wrap show by error way. #19952

Open llqgit opened 4 years ago

llqgit commented 4 years ago

Element UI version

2.13.2

OS/Browsers version

safari 13.1.2 / chrome 83.0.4103.116

Vue version

3.0.0-rc.4

Reproduction Link

https://codepen.io/llq/pen/LYGobxG

Steps to reproduce

max point marks use Chinese characters or symbols like '~' 最大值的 marks 使用中文或者符号,出现换行问题。 eg: “1~2” “到达最大”

The letters are ok. 只使用字母没有问题。

What is Expected?

最大值处的 mark 使用中文或者符号,仍然不要换行

What is actually happening?

最大值处的 mark 使用中文或者符号,文字变成竖向排列了

element-bot commented 4 years ago

Translation of this issue:

Element UI version

2.13.2

OS/Browsers version

safari 13.1.2 / chrome 83.0.4103.116

Vue version

3.0.0-rc.4

Reproduction Link

https://codepen.io/llq/pen/LYGobxG

Steps to reproduce

max point marks use Chinese characters or symbols like '~'

The maximum marks use Chinese or symbols, and there is a newline problem. Eg:

“1~2” "Reach maximum"

The letters are ok. There's no problem with just using letters.

What is Expected?

The mark at the maximum value should use Chinese or symbol, and do not wrap

What is actually happening?

The mark at the maximum value uses Chinese or symbol, and the text is arranged vertically

sunMarkto commented 2 years ago

是因为继承自父元素(例如.el-dialog__body) 的break-all属性造成了换行,可以在el-slider上添加 word-break: normal 暂时解决这个问题