javascript – Der WhiteSpace-Schreib-Interline-Stil in React wird nicht wirksam

Question

Das Hinzufügen von Inline-Stilen zu Elementen in React wirkt sich auf alles andere aus, außer auf WhiteSpace. Gibt es eine Möglichkeit, das Problem zu lösen? Der Zweck besteht darin, es zu verwenden, wenn Text überläuft

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

Der im Browser angezeigte Stil ist

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

Bitte geben Sie mir einen Rat, vielen Dank

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.