javascript - 在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

顯示：內聯塊；

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 在 HTML4 中已被棄用，並且不是 HTML5 的一部分。
我強烈建議使用CSS。