javascript - 在react中写行间样式的whiteSpace不生效

问题描述

react中给元素加上行内样式,别的生效,唯独whiteSpace不生效,有没有办法解决?目的是做文字溢出时用

<span style={{ fontSize: ’14px’, paddingTop: ’1px’, fontFamily: ’微软雅黑’, maxWidth: ’56px’, overflow: ’hidden’, textOverflow: ’ellipsis’, whiteSpace: ’nowrap’ }}> {node.title} </span>

浏览器中样式显示的是

element.style { font-size: 14px; padding-top: 1px; font-family: 微软雅黑; max-width: 56px; overflow: hidden; text-overflow: ellipsis;}

跪求指教,谢谢给为大神

问题解答

display: inline-block;

因为是iframe中样式,所以只能写行内样式.但是试了很多中方式,white-space:nowrap都无法使用.包括升级到最新的react版本.最后的解决方式是:

<span style={{ fontSize: ’14px’, paddingTop: ’1px’, fontFamily: ’微软雅黑’, maxWidth: ’56px’, overflow: ’hidden’, textOverflow: ’ellipsis’, whiteSpace: ’pre’ }}> {node.title} </span>

不知道为何nowrap属性无法使用,但是用pre属性就完美解决了.

https://github.com/facebook/r...

nowrap was deprecated in HTML4 and is not a part of HTML5. I strongly suggest using CSS instead.