javascript - whiteSpace writing interline style in react does not take effect

Question

Adding inline styles to elements in react will take effect on everything else except whiteSpace. Is there any way to solve it? The purpose is to use

when text overflows.

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

The style displayed in the browser is

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

Kneel down and ask for advice, thank you for your guidance

Answer 1

display: inline-block;

Answer 2

Because it is an iframe style, you can only write inline styles. But after trying many methods, white-space:nowrap cannot be used.
Including upgrading to the latest react version.
The final solution is:

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

I don’t know why the nowrap attribute cannot be used, but using the pre attribute solves the problem perfectly.

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.