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.