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

Question

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;
}

跪求指教,谢谢给为大神

Answer 1

display: inline-block;

Answer 2

因为是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属性就完美解决了.

Answer 3

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

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